CSS code:
*{
margin:0;
padding:0;
}
#nav {
Background: #eee;
width:600px;
height:40px;
margin:0 Auto; /* Center */
}
ul{
List-style:none;
}
UL li{
Float:left;
width:90px;
line-height:40px;
Text-align:center;
position:relative;
}
a{
Text-decoration:none;
Color: #000;
Display:block;
}
a:hover{
Background: #0F6;
}
UL Li ul li{
Float:none;
Background: #eee;
margin-top:2px;
}
UL Li ul {
Position:absolute;
top:40px;
left:0px;
Display:none;/* Hide First */
}
UL Li ul Li a:hover{
Background: #06C;
}
UL Li:hover ul {
Display:block;
}
HTML code:
<div id= "NAV" >
<ul>
<li><a href= "#" > Home </a> </li>
<li><a href= "#" > News </a>
<ul>
<li><a href= "#" > Social </a></li>
<li><a href= "#" > Management </a></li>
<li><a href= "#" > Finance </a></li>
</ul>
</li>
<li><a href= "#" > Lectures </a>
<ul>
<li><a href= "#" > Social </a></li>
<li><a href= "#" > Management </a></li>
<li><a href= "#" > Finance </a></li>
</ul>
</li>
<li><a href= "#" > Web </a></li>
</ul>
</div>
Drop-down menu (CSS)