CSS Drop down nav menu hover issue

Question

I created a drop down nav menu purely in css and everything works correctly except the hover effects. When I high light one of the options in the horizontal menu it will show a red background and bring the first submenu down however once I move through the submenu the red background goes away from the top link and then goes on whatever link I highlight in the submenu. I also have 2nd level and 3rd level sub menus that I'd like to highlight as I move around but the red hover effect will only stay on one link at a time. Given my css code below what would I need to do to get the hover effect to anchor on each sub menu as I navigate through it. Also a link to the menu in action can be found here: http://www.clubkumite.com/menu.html

Thanks!

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
    padding: 0;
    margin: 0;
        font-size: 100%;
    font-weight: normal;
}
a {

   text-decoration: none;
   color: #47864D;
}

a:hover {
  color: #F93;
}

#nav {
    background-color: #F90;
    text-align: center;

}

#nav ul {
    display: table;
    height: 30px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    font-size: 14px;
}


#nav li { 
    display: table-cell;
    position: relative;
    width: 15em 
}

#nav a {
    display: block;
    width: 15em;
    color: #FFF;
    background-color: #F90;
    height: 35px;
    font-size: 14px;

} 

#nav a:hover {
    background-color: #900;
    width: 15em;


}

#nav li ul { 
    display: block;
    position: absolute; 
    width: 15em; 
    left: -999em;

} 

#nav li:hover ul { left: auto }

#nav li li, #nav li li a { display: block }

#nav li li a { width: auto; padding: 0 }

#nav li ul ul { /* third-and-above-level lists */
    margin: -2em 0 0 15em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}

ptriek · Accepted Answer · 2011-12-19 16:54:54Z

4

Change #nav a:hover to #nav li:hover > a

#nav li:hover > a {
    background-color: #900;
    width: 15em;
}

The > makes sure you're not selecting all a's within the underlying submenu(s) - it selects just the top level a.

answered Dec 19, 2011 at 16:54

ptriek

9,2965 gold badges34 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kham · Accepted Answer · 2015-12-23 05:40:23Z

0

I used the list css drop menus for my website. The code is so simple you can check the code and can use the same.

www.onwebsoft.com

Just copy my sourse and you can resolve your issue. That is so simple and easy. If you need 2nd level of menu let me know i will send you code.

Thanks K

answered Dec 23, 2015 at 5:40

Kham

1

1 Comment

devpro Over a year ago

its better to share the solution properly.

Collectives™ on Stack Overflow

CSS Drop down nav menu hover issue

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related