<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul class="dropdown">
<li><a href="#">Services 1</a></li>
<li><a href="#">Services 2</a></li>
<li><a href="#">Services 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
The main navbar styling is same as we learnt in horizontal navbar. Let's see what we did with the nested one.
ul.dropdown{
display: none;
position: absolute;
background-color: #ccc;
min-width: 160px;
}
ul.dropdown li{
float: none;
}
ul.dropdown li a{
background: #ccc;
color: #333;
display: block;
}
ul.dropdown li a:hover{
background: #000;
color: #fff;
}
ul li:hover .dropdown{
display: block;
}
Let's add another dropdown to it now.
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
<ul class="dropdown">
<li><a href="#">Services 1</a></li>
<li><a href="#">Services 2</a></li>
<li><a href="#">Services 3</a>
<ul class="sec-drop">
<li><a href="#">Services 3.1</a></li>
<li><a href="#">Services 3.2</a></li>
<li><a href="#">Services 3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
And a little more css properties too.
ul.sec-drop{
display: none;
position: absolute;
min-width: 168px;
margin-left: 120px;
margin-top: -40px;
}
ul.dropdown li:hover ul.sec-drop{
display: block;
}
Mostly we see these sort of dropdowns in ecommerce sites that have a huge number of submenus which won't look good if placed right below the related menu only. In such situations we stretch the submenu to the right as required to display the menus.
Here's the HTML code for the same.
<ul class="main-menu">
<li><a href="#">MEN</a>
<div class="submenu">
<ul class="sub">
<h2>Clothes</h2>
<li><a href="#">Casual</a></li>
<li><a href="#">Formal</a></li>
<li><a href="#">Seasonal</a></li>
<li><a href="#">Latest Trend</a></li>
</ul>
<ul class="sub">
<h2>Shoes</h2>
<li><a href="#">Casual</a></li>
<li><a href="#">Formal</a></li>
<li><a href="#">Seasonal</a></li>
<li><a href="#">Latest Trend</a></li>
</ul>
<ul class="sub">
<h2>Pants</h2>
<li><a href="#">Casual</a></li>
<li><a href="#">Formal</a></li>
<li><a href="#">Seasonal</a></li>
<li><a href="#">Latest Trend</a></li>
</ul>
<ul class="sub">
<h2>Accessories</h2>
<li><a href="#">Casual</a></li>
<li><a href="#">Formal</a></li>
<li><a href="#">Seasonal</a></li>
<li><a href="#">Latest Trend</a></li>
</ul>
</div>
</li>
<li><a href="#">WOMEN</a></li>
<li><a href="#">CHILDREN</a></li>
<li><a href="#">ELECTRONICS</a></li>
<li><a href="#">FURNITURE</a></li>
<li><a href="#">UTILITIES</a></li>
<li><a href="#">SPORTS</a></li>
<li><a href="#">BOOKS</a></li>
<li><a href="#">GIFTS</a></li>
</ul>
Now, lets see the CSS properties.
ul.main-menu{
background: #367fa9;
min-height: 40px;
width: 100%;
position: relative;
padding-left: 100px;
}
ul.main-menu li{
list-style-type: none;
}
ul.main-menu > li > a{
padding: 10px 20px;
color: #fff;
display: block;
float: left;
}
ul.main-menu li:hover > a{
background: #fff;
color: #367fa9;
}
.submenu{
position: absolute;
display: none;
background: #367fa9;
padding: 20px;
width: 830px;
margin-top: 40px;
border-top: 5px solid #fff;
}
.submenu h2{
margin: 0px;
font-size: 24px;
color: #fff;
}
ul.sub{
width: 25%;
float: left;
}
ul.sub li a{
padding: 10px 10px 10px 0px;
color: #fff;
display: block;
}
ul.sub li a:hover{
background: none !important;
color: #ccc;
}
ul.main-menu li:hover .submenu{
display: block;
}
Leave a comment