Menu button hover color

[jessnoonyes]

On the menu links of my site the links turn a dark blue when hovered, and three of the links drop down to reveal more. However if you move the mouse to one of the drop down links I need for the above parent button to remain dark blue and I can't figure out how to code that.

I'd appreciate any pointers!

[lystar]

Check out this article: Suckerfish Dropdowns (http://www.alistapart.com/articles/dropdowns)

A page I made for a school project can be seen here (its ugly as sin and was built in about 3 hours, 2 years ago): LINK (http://www.beercannon.net)

If you hover over "Documents" or "Media" a popout menu comes up and the parent stays highlighted.

Is that what you are looking for?

[jessnoonyes]

Yep that's about the effect I was going for! However I'm trying to avoid javascript if at all possible (doesn't suckerfish use javascript?). I will take a look at that code though and see if there's something there that I can use!

[lystar]

Feel free to tear the source for that page to pieces... though I warn you I think the css file is a jungle of ugly code and IE hacks. (like I said, the site was tossed together in a hurry)
It was done without the use of javascript.

Its been a while since I looked at the suckerfish article... so its possible that method uses JS. I could be thinking of Son of Suckerfish. There should be an artical for that on A List Apart as well.

I'll go dig up the css file and see what I can do for you.

EDIT: Here is all of the menu related css from that site I gave you... its messy! you have been warned!

#menu_frame #nav, #nav ul {
list-style: none;
line-height: 30px;
padding: 0px;

}

#nav li {
width: 165px;
padding-left: 10px;

}

#nav li:hover {
width: 165px;
background-image: url('transbg2.png');
background-color: #fee161;
text-transform: uppercase;
text-decoration: none;
list-style-image: url('licon.png');
list-style-position: inside;
font-weight: 900;

}

#nav li ul {
position: absolute;
left: -999em;
background-color: #fee161;
}

#nav li:hover ul {
left: auto;
margin-left: 150px;
margin-top: -37px;
text-transform: none;
font-weight: normal;
display: block;
background-image: url('transbg.png');
border: 8px double #783b0e;
}
#nav li ul li:hover {
width: 165px;
background-image: url('transbg2.png');
background-color: #fee161;
text-transform: uppercase;
text-decoration: none;
list-style-image: url('licon.png');
list-style-position: inside;
font-weight: 900;
}

[jessnoonyes]

Hey it's simpler than mine :) I can see how you set that up, and it's very similar to mine. You have this one here #nav li:hover { for the main menu item when it's hovered, but I still don't see why it stays hovered when you move to a submenu item...

[lystar]

Well... I'm just an amateur dev myself, so I can't nail down all the tech-y stuff behind the code.

But my guess is that when the pop-out menu comes up and you hover over a sub option, you are technically still within the parent element thus it stays "hovered".

I'm sure someone around here knows a little more about the technical side of things and can explain it a little better.