Hey all,
I'm trying to make a small menu popup via CSS. On rollover, the link should display another set of links below the link that the mouse is hovering on. The code Below works in FF but not in IE. Could someone help out? Thanks.
style.css
.navigation {
margin: 0.5em;
padding: 0.3em;
border: 1px solid #C4C4C4;
text-align: left;
}
.navigation li a:link, a:visited{
color: #545454;
text-decoration: none
}
.navigation li a:hover{
color: #72C32B;
}
.navigation li a:active {
color: #545454;
text-decoration: none
}
.navigation ul{
list-style-type: none;
margin: 0.3em 0 0.1em 0.1em;
padding: 0em 0 0.1em 1em;
}
.navigation li .popup {
display:none;
background-color:white;
background-style:solid;
position:float;
}
.navigation li:hover .popup,
.navigation li:focus .popup,
.navigation li:active .popup {
display:block;
}
nav.html
<div class="navigation">
<ul>
<li><a href="Home.html">Home</a></li>
<li>
<a href="#">Links</a>
<div class="popup">
<ul>
<li><a href="link1.html">Link 1</a></li>
<li><a href="link2html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
</ul>
</div>
</li>
</ul>
</div>