2nd selector hover not working in multi level depth menus

Question

I've struggled now for several days trying to make this work - and I'm beginning to see things floating past my eyes that have not yet been created.

The problem is that I need to build a multi-level navigation system with ZERO Java or JQuery using ONLY CSS and HTML.

The source of the code will be generated from an ASP app, so the details of the navigation system will be stored in a database. I can therefore maintain ID values and all of the other relational aspects outside of the code.

main problem is trying to find enough information to help me understand how the :HOVER action works - because I cannot get the other levels to react to the HOVER from the main level.

What I need is for the Level 2 menus to become visible and expose only the relevant options on the hover of the main menu. As you hover over the next level so too should the relevant menus only open up.

The user must never click more than 3 times in the site, so i need to expose all of the options quickly and smoothly, so I need to get to a final choice in this example with only 1 click - after hovering over each option.

Please help.

My CSS Code:

a {text-decoration:none;}
.L2:before {content:"["}
.L2:after {content:"]"}


.L1{
   width:30em;
   padding:6px;
   margin:6px;
   background-color:cyan;
   border-style:groove;
   width:120px;
   text-align:center;
   position:relative;
   display:inline;
   vertical-align:text-top;
   border-style:groove;
   height:2.5em;
   border-radius:10px 10px 10px 10px;
   z-index:1;
   visibility:visible;
}

.mnuL2 {
border-style:groove;
border-radius:10px 10px 10px 10px;
background-color:cyan;
}
.divider {
border-bottom-style:dashed;
}
    .Level2{
    width:20em;
    height:1.8em;
    visibility:hidden;
}

div[id^=mnu1] {
    position:absolute;
    padding:4px;
    margin:0 10px 0 0;
    display:inline;
    top:1.85em;
    visibility:visible;
}

div[id^=mnu2] {
    position:absolute;
    padding:4px;
    display:inline;
    top:1.85em;
    left:5px;
    /*visibility:visible;*/
}

.Level3 {
    visibility:hidden;
}


div[id^=One] {
    position:relative;
    top:5px;
    left:16px;
    display:list-item;
    /*visibility:visible;*/
    z-index:10;
}

div[id^=Two] {
    position:relative;
    top:5px;
    left:16px;
    display:list-item;
    visibility:visible;
    z-index:10;
}


.L1:hover{
   background:lightgray;
}


.L1:hover div[id^=mnu1]{
   background:lightgray;
   font-style:italic;
}

My HTML Code

<!DOCTYPE html>
<html>
<head>
    <link href="OneStyle.css" rel="stylesheet" type="text/css" />
</head>


<body>


<div id="NavSys">
    <div class="mnuParent">
       <div class=L1 id=mnu01><a href="#"> One</a></div>
       <div class=L1 id=mnu02><a href="#">Two</a></div>
       <div class=L1 id=mnu03><a href="#">Three</a></div>
    </div>

    <div class="mnuL2">
        <div Class="Level2">
           <div class="L2"  id="mnu11"><a href="#">One-001</a></div>
           <div class="L2" id="mnu12"><a href="#">One-002</a></div>
           <div class="L2" id="mnu21"><a href="#">Two-001</a></div>
           <div class="L2" id="mnu22"><a href="#">Two-002</a></div>
           <div class="L2" id="mnu31"><a href="#">Three-001</a></div>
           <div class="L2" id="mnu32"><a href="#">Three-002</a></div>
         </div>
        <div class="divider"></div>
        <div class="Level3">
           <div class="L3" id="One11"><a href="#">One11</a></div>
           <div class="L3" id="One12"><a href="#">One12</a></div>
           <div class="L3" id="One21"><a href="#">One21</a></div>
           <div class="L3" id="One22"><a href="#">One22</a></div>
           <div class="L3" id="Two11"><a href="#">Two11</a></div>
           <div class="L3" id="Two12"><a href="#">Two12</a></div>
           <div class="L3" id="Two21"><a href="#">Two21</a></div>
           <div class="L3" id="Two22"><a href="#">Two22</a></div>
           <div class="L3" id="Three11"><a href="#">Three11</a></div>
           <div class="L3" id="Three12"><a href="#">Three12</a></div>
           <div class="L3" id="Three21"><a href="#">Three21</a></div>
           <div class="L3" id="Three22"><a href="#">Three22</a></div>
       </div>
    </div>
</div>


</body>
</html>

Take a look at this answer(Multi-level nav with pure CSS): http://stackoverflow.com/a/9101168/2772017 — intCoffee, May 20 '14 at 14:48

Jonathan Nicol · Answer 1 · 2014-05-20T14:33:36.300

Normally when creating a pure CSS dropdown menu system, submenu items would be nested within the parent button (each menu & submenu typically marked up as an unordered list).

What you're trying to do won't ever work, since you're trying to target an element that is further up the DOM than the element that is being hovered over. CSS can traverse down the DOM tree, but not up.

Here's how you can create a pure CSS dropdown menu.

I've assumed that your markup isn't set in stone, and that you can in fact move your menus so that they are nested inside their containing li.

HTML:

<ul class="menu">
    <li>
        <a href="#">One</a>
        <ul class="menu">
            <li><a href="#">Sub1 A</a></li>
            <li>
                <a href="#">Sub1 B</a>
                <ul class="menu">
                    <li><a href="#">Sub2 A</a></li>
                    <li><a href="#">Sub2 B</a></li>
                    <li><a href="#">Sub2 C</a></li>
                </ul>
            </li>
            <li><a href="#">Sub1 C</a></li>
        </ul>
    </li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

CSS:

.menu {
    padding: 0;
    margin: 0;
}
.menu .menu {
    display: none;
    position: absolute;
    left: 0;
    width: 200px;
}
.menu .menu .menu {
    left: 100%;
    top: 0;
}
.menu li {
    position: relative;
    float: left;
    list-style: none;
}
.menu .menu li {
    float: none;
}
.menu li:hover > .menu {
    display: block;
}
.menu a {
    display: block;
    border: 1px solid #fff;
    padding: 10px;
    background: lightgray;
}

And here is a fiddle showing this menu in action: http://jsfiddle.net/x9TnS/

This is a rudimentary proof-of-concept and you will find plenty of more detailed tutorials by searching for "pure css dropdown menu".

Möhre · Accepted Answer · 2014-05-20T15:18:18.540

To make this work you have to:

add the level's content inside the trigger element (preferred version) (click for Fiddle)

UL
 |- LI
 |- LI (trigger 1)
 |   |
 |   UL (content 1)
 |   |- LI
 |   |- LI
 |   |- LI
 |
 |- LI (trigger 2)
 |   |
 |   UL (content 2)
 |   |- LI
 |   |- LI
 |   |- LI
 |
 |- LI

OR

add the level's content next to the trigger element (click for Fiddle)

NAV
 |- DIV (trigger 1)
 |- DIV (content 1)
 |- DIV (trigger 2)
 |- DIV (content 2)

OR

add the level's content somewhere after the trigger element (click for Fiddle)

NAV
 |- DIV (trigger 1)
 |- DIV (trigger 2)
 |- DIV (content 1)
 |- DIV (content 2)

Any other structure won't work with plain CSS.

Please note only the first version is semantically correct. The other versions offer only some easier styling.

2nd selector hover not working in multi level depth menus

2 Answers2