Languages Languages - 3 months ago 9
CSS Question

How to hide the third nested list in this css dropdown nested lists?

I successfully created this not so bad css-only dropdown. I'm trying to hide the

.submenutwo
so that it is only visible when
.submenu
is on hover. If we can do this with css only that would be nice. But if javascript or jQuery can help it's fine.



/* define a fixed width for the entire menu */

.navigation {
min-width: 300px;
}
/* reset our lists to remove bullet points and padding */

.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */

.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */

.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
display: block;
min-height: 200px;
height: auto;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
background-color: #999;
}
/* hover behaviour for links inside .submenu */

.submenu a:hover {
background-color: #666;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/

.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}

<nav class="navigation">
<ul class="mainmenu">
<li><a href="">Apples</a>


<ul class="submenu">
<li><a href="">Green Apples</a>

<ul class="submenutwo">
<li class='listOptionLvlThree'><a href="#"> Option 3</a>
</li>
<li class='listOptionLvlThree'><a href="#"> Option 3</a>
</li>
<li class='listOptionLvlThree'><a href="#"> Option 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Oranges</a>
<ul class="submenu">
<li><a href="">Option 2</a>
</li>
<li><a href="">Option 2</a>
</li>
<li><a href="">Option 2</a>
</li>
</ul>
</li>
<li><a href="">Grapes</a>
<ul class="submenu">
<li><a href="">Purple Grapes</a>

<ul class="submenutwo">
<li class='listOptionLvlThree'><a href="#"> Option 3</a>
</li>
<li class='listOptionLvlThree'><a href="#"> Option 3</a>
</li>
<li class='listOptionLvlThree'><a href="#"> Option 3</a>
</li>
</ul>
</li>
<li><a href="">Green Grapes</a>
</li>
<li><a href="">Red Grapes</a>
</li>
</ul>
</li>
</ul>
</nav>




Answer
.submenutwo {
    display: none }

.submenu:hover .submenutwo {
    display: initial }

Here's how you can do it in css. Basically, what's happening here is. At first, you just need to hide .submenutwo. After the hover triggered, you just need to bring back the display to the default or even other display value will do.