Hover issue

[doodlebee]

Hey all,

I'm having a really weird issue going on. I've only tested this in FF 3.5 (since that's what I'm developing in - i haven't made it to browser testing yet) - so I'm not sure if it's occurring in other browsers.

So I have this navigational menu. Two items in the nav menu have dropdown links. When you hover over the parent links, the dropdown appears, and the parent link turns yellow. This is what it's supposed to do.

The odd thing is, if you hover over the parent link, and then hover over the dropped-down menu, and then move your mouse up the list again and over the parent link, the menu disappears and the parent link reverts back to white. This is what it's supposed to do.

BUT - when you hover over the parent link, it turns yellow and the dropdown comes out, hover over the menu list and then off the menu onto the page - the parent link stays yellow, as if it's retaining the hover status. It won't return to white unless you hover over the parent link and off again.

This is the weirdest thing I've ever encountered, and for the life of me, I cannot figure out why it's doing this - I've been trying for three weeks now. Can anyone take a peek at this code and see if you see anything that would cause this?

The menu itself is your standard nested list - nothing more. The menu CSS is as follows:

div.main-menu {
position:relative;
top:0;
margin-bottom:-10px;
width:787px;
padding-top:22px;
float:right;
clear:right;
background:url("images/content_top.png") no-repeat left top;
}

div.main-menu ul {
margin:0;
padding:0;
text-align:center;
position:relative;
background:url("images/content_dk_bg.png") no-repeat 0 18px;
}

div.main-menu li {
position: relative;
display:inline-block;
vertical-align: top;
height:40px;
}

div.main-menu li ul {
position: absolute;
left:10px;
top: 40px;
z-index: 1000;
background: #333;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display: none;
}

div.main-menu li li {
min-width: 325px;
text-align: left;
border-bottom: 1px solid #fff;
margin: 0;
height:auto;
line-height: auto;
}

div.main-menu li a, div.main-menu li a:link, div.main-menu li a:visited {
display:block;
color:#fff;
text-decoration:none;
font:bold 0.85em "MyriadPro", "Arial Narrow", sans-serif;
text-transform:uppercase;
letter-spacing:0.17em;
padding:20px 10px 0 10px;
}

div.main-menu li a:hover, div.main-menu li a:active,
div.main-menu li.submenu:hover > a {
color:#ffd24f;
background:url("images/navhover.gif") no-repeat top center;
}

div.main-menu li.submenu > a {
color:#fff;
}

div.main-menu li:hover > ul {
display: block;
left:-115px;
}

div.main-menu li.submenu li a:link, div.main-menu li.submenu li a:visited {
background-image: none;
padding: 5px;
color:#fff;
}

div.main-menu li.submenu li a:hover, div.main-menu li.submenu li a:active {
background-color: #555;
}

[Shado]

Don't have time to test your code but sounds like it's inheriting the colour from another div. Check all your CSS and make sure you have not missed something.

[doodlebee]

Thank you Shado!

But nope - that's not it, unfortunately. however, someone did point something out to me - turns out it's a bug in cufon. (I'm using cufon to change the font in the menu items) If I disable cufon, it works just fine.

There's a few google groups bug reports on the issue (I don't know if I can link to them here...) but the solution that worked for me was to add this after the call to the cufon script:

 <script type="text/javascript">
 $(document).ready(function() {
  function updateMenu() {
   setTimeout(function() {
    Cufon.replace('div.main-menu a', {}, false);
   }, 10);
  }
  $('div.main-menu li').hover(updateMenu, updateMenu);

}); 
 </script>

hope that helps someone else!

[Shado]

Sweet then you sorted ;) Nice to hear