CSS Code
#menu {
height:65px;
width:100%;
Background-color:rgba (0, 0, 0, 0.5);
}
#menu ul{
List-style:none;
}
#menu ul li{
Float:left;
position:relative;//If this is not set to this, the displayed drop-down is horizontal
}
#menu ul li a {//Head navigation link
Text-align:center;
border-right:1px solid #e9e9e9;
padding:20px;
Display:block;
Text-decoration:none;
Color:white;
}
#menu ul Li ul {
Display:none;
}
#menu UL Li:hover ul {
Display:block;
Position:absolute;
}
#menu UL Li:hover ul li a {//second column navigation link
Display:block;
background: #12aeef;
color: #ffffff;
width:50px;
Text-align:center;
border-bottom:1px solid #f2f2f2;
Border-right:none;
}
#menu UL Li:hover ul li a:hover {
background: #6dc7ec;
color: #fff;
}
HTML code
<div id= "menu" >
<ul>
<li><a> Title One </a>
<ul>
<li><a href= "" > Dropdown </a></li>
<li><a href= "" > Under Lah </a></li>
<li><a href= "" > drop-down three </a></li>
</ul>
</li>
<li><a> title two </a>
<ul>
<li><a href= "" > Dropdown </a></li>
<li><a href= "" > Under Lah </a></li>
<li><a href= "" > drop-down three </a></li>
</ul>
</li>
<li><a> Title III </a>
<ul>
<li><a href= "" > Dropdown </a></li>
<li><a href= "" > Under Lah </a></li>
<li><a href= "" > drop-down three </a></li>
</ul>
</li>
<li><a> title four </a>
<ul>
<li><a href= "" > Dropdown </a></li>
<li><a href= "" > Under Lah </a></li>
<li><a href= "" > drop-down three </a></li>
</ul>
</li>
<li><a> title Five </a>
<ul>
<li><a href= "" > Dropdown </a></li>
<li><a href= "" > Under Lah </a></li>
<li><a href= "" > drop-down three </a></li>
</ul>
</li>
</ul>
</div>
CSS makes a simple navigation bar