Search code examples
cssdrop-down-menumenuhoversubmenu

Getting properties on a drop down hover menu working correctly using CSS and HTML5

So I'm pretty new to CSS and HTML and I'm trying to get this drop down hover menu to work right.

Here's a link to the fiddle

Under Link 3, there's a sub-menu with links that appear under it. I want it so that when the user hovers over one of the sublinks, the parent link's (Link 3) background color remains highlighted rather than fading away back to blue. This is the CSS I'm using to highlight each link during a hover.

 #menu a:hover, #menu .current_page_item a 
    {
        text-decoration: none;
        background:#d4728b;
    }

This code also makes it so that the current link that is hovered over will be highlighted, but I would like it so that when the cursor is hovering over another link in the menu, the current_page highlight will shift to that link rather than two links being highlighted at one time. Any help would be appreciated.

Solution

  • set your li to change color opposed to the anchor.

    #menu li:hover {
    text-decoration: none;
    background:#d4728b;
}

    rough fiddle: http://jsfiddle.net/6xLqU/19/