In this post I give an example of horizontal drop-down menu designed using pure css.
CSS Code
#navdemo1 ul ul {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
display: none;
}
#navdemo1 ul li:hover > ul {
display: block;
}
#navdemo1 ul {
background: #fefefe;
padding: 0 10px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
list-style: none;
position: relative;
display: inline-table;
}
#navdemo1 ul:after {
content: "";
clear: both;
display: block;
}
#navdemo1 ul li {
float: left;
}
#navdemo1 ul li:hover a {
color:#000;
}
#navdemo1 ul li a {
display: block;
padding: 15px 30px;
color: #000;
text-decoration: none;
}
#navdemo1 ul ul {
background: #FEFEFE;
padding: 0;
border-radius: 5px;
-moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
-webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
position: absolute;
top: 100%;
}
#navdemo1 ul ul li {
float: none;
border-bottom: 1px solid #DDD;
position: relative;
}
#navdemo1 ul ul li a {
padding: 10px 40px;
color: #000;
}
#navdemo1 ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.noborder{
border:none;
}
HTML Code
<div id="navdemo1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">.NET</a></li>
<li><a href="#">php</a></li>
<li class="noborder"><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li class="noborder"><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Review</a>
<ul>
<li><a href="#">Software</a></li>
<li><a href="#">Website</a></li>
<li class="noborder"><a href="#">Mobile</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
</ul>
</div>
