Languages Languages - 3 months ago 9
Javascript Question

How to beautify this nested list with css?

I made this drop-down menu with nested lists. But no matter how I adjust

height
, it is impossible to display every element in
.submenutwo
. Moreover, when hovering
.submenutwo
the user can no longer see the other options. Is there an easy way to fix this with css or very minimal javascript? Adjusting
height
to
min-height
does not work. I think
onclick
will be better than
hovering
.



/* 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;
}
.submenutwo {
display: none
}
.submenu:hover .submenutwo {
display: initial;
min-height: 300px;
height: auto;
}

<nav class="navigation">
<ul class="mainmenu">


<li><a href="">Residential</a>
<ul class="submenu">
<li><a href="">Interior</a>
<ul class="submenutwo">
<li class='listOptionLvlThree'><a href="#">Kitchen </a>
</li>
<li class='listOptionLvlThree'><a href="#"> Bathroom </a>
</li>
<li class='listOptionLvlThree'><a href="#"> Basement </a>
</li>
<li class='listOptionLvlThree'><a href="#"> Bedroom </a>
</li>
<li class='listOptionLvlThree'><a href="#"> Diner Room </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
</ul>
</li>



<li><a href="">Exterior</a>
<ul class="submenutwo">
<li class='listOptionLvlThree'><a href="#"> Doors and windows </a>
</li>
<li class='listOptionLvlThree'><a href="#"> Garage </a>
</li>
<li class='listOptionLvlThree'><a href="#"> Roofing </a>
</li>
<li class='listOptionLvlThree'><a href="#"> Insulation </a>
</li>
<li class='listOptionLvlThree'><a href="#"> Masonry</a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
</ul>
</li>


<li><a href="">Services</a>
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>








<li><a href="">Commercial</a>
<ul class="submenu">
<li><a href="">Interior</a>
<ul class="submenutwo">
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
</ul>
</li>



<li><a href="">Exterior</a>
<ul class="submenutwo">
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
</ul>
</li>


<li><a href="">Services</a>
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>




<li><a href="">Industrial</a>
<ul class="submenu">
<li><a href="">Interior</a>
<ul class="submenutwo">
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
</ul>
</li>



<li><a href="">Exterior</a>
<ul class="submenutwo">
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
<li class='listOptionLvlThree'><a href="#"> More option </a>
</li>
</ul>
</li>


<li><a href="">Services</a>
<ul class="submenutwo">
</ul>
</li>
</ul>
</li>


</ul>
</nav>




Answer

here are the css codes, may find what you want :)

/* 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;*/
    display: none;
    -webkit-transition: all 0.5s ease-out;
}


.submenutwo {
    display: none
}

.submenu li:hover .submenutwo {
    display: block;
    /*min-height:300px;*/
    /*height:auto;*/

}