为什么隐藏的可见性必须在 css 中添加绝对位置

这是我的代码：

<html>
<head>
<style type="text/css">
 ul {list-style:none; margin:0; padding:0;   }
  li{ float:left;  background-color:#444444; text-align: center; width: 100px;  
  border-right:1px solid white; color: white; }
li ul li { float: none;
         border-top:1px solid white;}
         li ul { visibility:hidden; position: absolute;}
        li:hover ul {visibility:visible;}
  </style>
</head>
<body>
     <ul>
       <li>home</li>
       <li id="up">pages
       <ul class="down">
       <li>a</li>
       <li>b</li>
       <li>c</li>                  
      </ul>
       </li> 
     </ul>    
</body>
</html>

在 li ul 部分如果我只放可见性：隐藏，它不隐藏那里还有一列，为什么？

这与

visibility: hidden;和说display: none;之间的区别有关

visibility: hidden;隐藏元素，但它仍然占用布局中的空间。

display: none; 从文档中完全删除该元素。它不占用任何空间，即使它的 HTML 仍在源代码中。

position: absolute; 元素完全从正常流程中删除。

相关内容

最新更新

热门标签：