homepage Welcome to WebmasterWorld Guest from 54.237.95.6
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Hover issue
doodlebee




msg:4194186
 9:14 pm on Aug 30, 2010 (gmt 0)

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




msg:4194344
 8:37 am on Aug 31, 2010 (gmt 0)

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




msg:4194487
 12:44 pm on Aug 31, 2010 (gmt 0)

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




msg:4194493
 1:21 pm on Aug 31, 2010 (gmt 0)

Sweet then you sorted ;) Nice to hear

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved