Menus aren’t showing up when li:hover. Can’t see my mistake. Any help?
P.S. can anyone tell me how to get that interesting “slide” effect so the menus slide down rather than just appear…..
[code]
body {
behaviour: url(../csshover.htc);
margin:-0;
padding:0;
font-size: 100%;
font-family: verdana,arial,sans-serif;
}
#menu {
background: #000;
padding: 7px 7px 7px 0;
}
#menu ul {
list-style: none;
margin:0;
padding:0;
}
#menu li {
position:relative;
float: left;
padding: 0 25px;
}
#menu li a {
color: #eeffff;
font-size: 0.8em;
}
#menu ul ul {
position:absolute;
margin:0;
padding:0;
display: none;
}
#menu ul li:hover ul {
display:block;
}
[code]
<div id=”menu”>
<ul>
<li><a href=”#”>Menu #1</a></li>
<ul>
<li><a href=”#”>Sub #1 Item #1</a></li>
<li><a href=”#”>Sub #1 Item #2</a></li>
<li><a href=”#”>Sub #1 Item #3</a></li>
</ul>
</ul>
<ul>
<li><a href=”#”>Menu #2</a></li>
<ul>
<li><a href=”#”>Sub #2 Item #1</a></li>
<li><a href=”#”>Sub #2 Item #2</a></li>
<li><a href=”#”>Sub #2 Item #3</a></li>
</ul>
</ul>
<ul>
<li><a href=”#”>Menu #3</a></li>
<ul>
<li><a href=”#”>Sub #3 Item #1</a></li>
<li><a href=”#”>Sub #3 Item #2</a></li>
<li><a href=”#”>Sub #3 Item #3</a></li>
</ul>
</ul>
<ul>
<li><a href=”#”>Menu #4</a></li>
<ul>
<li><a href=”#”>Sub #4 Item #1</a></li>
<li><a href=”#”>Sub #4 Item #2</a></li>
<li><a href=”#”>Sub #4 Item #3</a></li>
</ul>
</ul>
<br style=”clear: both;”>
</div>