
Showing multilevel menu dropdown with only CSS and HTML is very simple and easy. In a previous tutorial, we have shown single level menu dropdown using jQuery. In this tutorial, we are doing it for the multi-level menu without jQuery or any Javascript.
This HTML code with the nested unordered list is used for showing menu in multilevel.
<ul id="menu"> <li class="parent"><a href="#">Popular Toys</a> <ul class="child"> <li class="parent"><a href="#">Video Games <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Car</a></li> <li><a href="#">Bike Race</a></li> <li><a href="#">Fishing</a></li> </ul> </li> <li><a href="#">Barbies</a></li> <li><a href="#">Teddy Bear</a></li> <li><a href="#">Golf Set</a></li> </ul> </li> <li class="parent"><a href="#">Recent Toys</a> <ul class="child"> <li><a href="#">Yoyo</a></li> <li><a href="#">Doctor Kit</a></li> <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a> <ul class="child"> <li><a href="#" nowrap>Cards</a></li> <li><a href="#" nowrap>Numbers</a></li> </ul> </li> <li><a href="#">Uno Cards</a></li> </ul> </li> <li class="parent"><a href="#">Toys Category</a> <ul class="child"> <li><a href="#">Battery Toys</a></li> <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a> <ul class="child"> <li><a href="#">Cars</a></li> <li><a href="#">Aeroplane</a></li> <li><a href="#">Helicopter</a></li> </ul> </li> <li><a href="#">Soft Toys</a> </li> <li><a href="#">Magnet Toys</a></li> </ul> </li> </ul>
Initially, we are showing only the list of parent menu items. On mouse over, the child items are displayed by using CSS: hover selector. We are controlling the child menu list position based on the corresponding parent menu item using this Stylesheet. The styles are,
.parent {display: block;position: relative;float: left;line-height: 30px;background-color: #4FA0D8;border-right:#CCC 1px solid;} .parent a{margin: 10px;color: #FFFFFF;text-decoration: none;} .parent:hover > ul {display:block;position:absolute;} .child {display: none;} .child li {background-color: #E4EFF7;line-height: 30px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:100%;} .child li a{color: #000000;} ul{list-style: none;margin: 0;padding: 0px; min-width:10em;} ul ul ul{left: 100%;top: 0;margin-left:1px;} li:hover {background-color: #95B4CA;} .parent li:hover {background-color: #F0F0F0;} .expand{font-size:12px;float:right;margin-right:5px;}