3 level css submenu hover state

Question

I got a css menu with 3 levels. You can see my actual code right here http://jsfiddle.net/7rMgu/

As you can see, my secondary level don't keep the light blue background when navigating in the 3rd level. I've looked over the website for similar thread but I just found similar problems with only 2 levels. Also, can someone explain when I should use the '>' in css as I'm a bit confused.

CSS

html{height:100%;background-color:#0d497d;}
body{width:100%;height:100%;margin:0px;padding:0px;color:#575757;font:0.75em "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;}
div.menuAdmin ul{margin:0;padding:0;float:right;height:100%;}
div.menuAdmin ul li{display:block;float:left;height:23px;margin-bottom:0;}
div.menuAdmin ul li a{color:#fff;padding:0.1em 0.3em 0.2em 0.3em;text-decoration:none;font-size:12px;display:block;margin:0.85em 0em 0em 0em;width:130px;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover a{color:#000;border-radius:5px;background-color:#78B9EF;}
div.menuAdmin ul li ul{display:none;}
div.menuAdmin ul li:hover > ul {display:block;height:20px;width:139px;position:absolute;margin:0;}
div.menuAdmin ul li:hover > ul li a {line-height: 20px;color:#fff;text-decoration: none;margin: 0;padding-bottom: 0.1em;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover > ul li a:hover {color:#000;text-decoration:none;text-shadow:none;background-color: #78B9EF;}
div.menuAdmin ul ul li:hover > ul {display:block;position:absolute;left:100%;top:0;width:139px;}
div.menuAdmin ul > ul > ul li:hover > a {color:#444;background-color:#78B9EF;}

HTML

<div class='menuAdmin'>
    <ul>
        <li>
            <a href=''>A</a>
            <ul>
                <li>
                    <a href=''>1</a>
                    <ul>
                        <li>
                            <a href=''>A1</a>
                        </li>
                        <li>
                            <a href=''>A2</a>
                        </li>
                        <li>
                            <a href=''>A3</a>
                        </li>
                        <li>
                            <a href=''>A4</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href=''>2</a>
                </li>
                <li>
                    <a href=''>3</a>
                </li>
                <li>
                    <a href=''>4</a>
                </li>
            </ul>
        </li>
        <li>
            <a href=''>B</a>
        </li>
        <li>
            <a href=''>C</a>
        </li>
        <li>
            <a href=''>D</a>
        </li>
    </ul>
</div>

Thanks

DaniP · Accepted Answer · 2014-01-29 20:05:29Z

2

To keep the :hover effect you need to make the change on hover the li element not just the a tag, so you have this:

div.menuAdmin ul li:hover > ul li a:hover

Must be:

div.menuAdmin ul li:hover > ul li:hover > a

With the hover on the li element keeps the effect since the ul wich is the submenu is part of the li.

Check the Demo http://jsfiddle.net/7rMgu/1/.

Now your second question when use this >; when you only want to affect the direct children, it let you avoid the same style on nested elements. An example with the same selector I have fix, if you remove the last > check what happen:

http://jsfiddle.net/7rMgu/3/

It changes all a inside the li even if are inside some nested elements.

answered Jan 29, 2014 at 20:05

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

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

3 Comments

Josh Crozier Over a year ago

1+ - Nice one :) I was too slow, deleted mine.

DaniP Over a year ago

@JoshC Sometimes SO is so competitive :P

Shadowizoo Over a year ago

Thanks, could'nt have a better response :)

Ryan Wheale · Accepted Answer · 2014-01-29 20:05:37Z

0

Here is an updated fiddle:

http://jsfiddle.net/ryanwheale/7rMgu/2/

Essentially, you always want the :hover selector to be on the LI. You had it on the A.

Also, the > selector in CSS means "direct children"... best explained by example:

<div class="my-div">
    <p>This should be blue</p>

    <div>
        <p>This should be green</p>
    </div>
</div>

and this css:

.my-div p { color: green }
.my-div > p { color: blue }

edited Jan 29, 2014 at 20:05

answered Jan 29, 2014 at 20:00

Ryan Wheale

28.7k11 gold badges87 silver badges105 bronze badges

Comments

xec · Accepted Answer · 2014-01-29 20:19:36Z

You have a few redundant rules, I've tried to boil it down for you:

.menuAdmin ul{ /* all lists */
    margin:0;
    padding:0;
    list-style: none;
}
.menuAdmin li { /* all list items */
    margin:0;
    padding:0;
}
.menuAdmin > ul { /* first level list*/
    float: right;
}
.menuAdmin > ul > li { /* first level list items*/
    float: left;
}
.menuAdmin ul ul { /* second and third level list */
    position: absolute; /* remove from flow */
    display: none; /* hide by default */
}
.menuAdmin ul ul ul { /* third level list */
    top: 0;
    left: 100%;
}
.menuAdmin li:hover > ul { /* first level list inside of a hovered item */
    display: block;
}
.menuAdmin a { /* all links */
    color:#fff;
    padding:0.1em 0.3em 0.2em 0.3em;
    text-decoration:none;
    font-size:12px;
    display:block;
    width:130px;
    background-color: #0d497d;
    border:1px solid #78B9EF;
    border-radius:5px;
}
.menuAdmin li:hover > a { /* links inside hovered list item */
    color:#000;
    background-color:#78B9EF;
}

As already answered, > means "child" (a.k.a. direct descendant)

See demo at http://jsfiddle.net/7rMgu/5/

Collectives™ on Stack Overflow

3 level css submenu hover state

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related