I've got an expandable css menu that is acting a bit weird in ie, but works fine in firefox. Anyone who can help me is appreciated.
Heres the problem. When I click the li it expands to the sub li fine, however, if I keep the mouse directly over the li I just clicked on, the text in the sub li's don't show. See this picture...notice where the mouse is located, and notice there is no text next to the sub li's. The anchor tag is represented by the dotted line.
If I move the mouse to the right (or anywhere off of the text "Los Angeles") the sub li's show up.
Notice the mouse now and the li's showing up in this picture:
Heres the css and html:
<HTML lang="en_US" sizcache="7062" sizset="0">
<HEAD>
<STYLE>
ul.left_menu{
position:relative;
float:left;
width:100%;
}
ul.left_menu li>a:hover{
cursor: pointer;
}
ul.left_menu li {
list-style-type:none;
position:relative;
padding-top: 5px;
clear:both;
}
ul#nav{
text-indent:15px;
}
#nav li > ul{
display:none;
padding-left:15px;
text-indent:15px;
}
#nav li {
line-height:11px;
}
#nav > li{
clear: both;
padding-left:15px;
line-height:11px;
}
A {
TEXT-ALIGN: left;
TEXT-DECORATION: none;
outline: none
}
</STYLE>
</HEAD>
<BODY>
<UL id="nav" class="left_menu">
<LI>
<A >Los Angeles</A>
<UL>
<LI>
<A>Commercial Properties</A>
<UL>
<LI>
<A>Office</A>
</LI>
<LI>
<A>Industrial</A>
</LI>
<LI>
<A>Retail</A>
</LI>
</UL>
</LI>
</ul>
</li>
</ul>
</body>
</html>
Thanks for your help.