Menu
This is my code:
<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>
In the li ul section if i only put visibility:hidden, it does not hide up there is still a column there, why?
833
This is to do with the difference between visibility: hidden; and say display: none;
visibility: hidden; hides the element, but it still takes up space in the layout.
display: none; removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
position: absolute; The element is removed from the normal flow entirely.
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
