这是我的代码:
<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; 该元素完全从正常流中移除.