CSS Menu disappear
- by WtFudgE
Hi, I created a menu in html/css but where I wanted the subitems to be shown on parent item hover. The problem is when I hover on it in IE it only shows it's subitems when I hover on the text in the menu item, If I hover over the element and not the text the subitems disappear again. So if I hover and want to move my mouse to my submenu the submenu disappears unless I'm fast enough. This is very annoying, does anyone know how I can solve this?
MY menu code is like so:
<ul id="leftnav">
Item1
SubItem1
SubItem2
SubItem3
Item2
SubItem1
SubItem2
SubItem3
The menu should be a left sided menu which shows it's subitems only on hover, so I used css to achieve this with the following code:
#leftnav, #leftnav ul
{
padding: 0;
margin: 0;
}
#leftnav ul li
{
margin-left: 102px;
position: relative;
top: -19px; /*sets the childitems on the same height as the parent item*/
}
#leftnav li
{
float: left;
width: 100px;
}
#leftnav ul
{
position: absolute;
width: 100px;
left: -1000px; /*makes it disappear*/
}
#leftnav li:hover ul, #leftnav li.ie_does_hover ul
{
left: auto;
}
#leftnav a
{
display: block;
height: 15px;
margin-top: 2px;
margin-bottom: 2px;
}
Since this only works with firefox I also had to insert a javascript to get this to work in IE using code:
<script language="JavaScript">
sfHover = function()
{
var sfElsE = document.getElementById("leftnav").getElementsByTagName("LI");
for (var i=0; i<sfElsE.length; i++)
{
sfElsE[i].onmouseover=function()
{
this.className+=" ie_does_hover";
}
sfElsE[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Many many many thanks for replies
