Menu Navigation bar tutorial with code

simple tutorial for understanding drop down menu bar with example source code.

CSS code :

#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }

#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}

#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
#buttongm {
padding:7px 5px;
background-color:#1E90FF;
color:white;
border:none;
font:14px sans-serif;
font-weight:bold;

}
#buttongm:hover {
background-color:#1C86EE;

}

HTML :


<ul id="navbar">
<li><a href="#">Item One</a><ul>
<li><a href="#">Subitem One</a></li>
<li><a href="#">Second Subitem</a></li>
<li><a href="#">Techie touch</a></li></ul>
</li>
       <li><a href="#">Item Two</a><ul>
<li><a href="#">1 Under Item two </a></li>
<li><a href="#">2 Under Item two</a></li>
<li><a href="#">3 Pradeesh</a></li></ul>
</li>
<!-- ... and so on ... -->
</ul>



Related Post:


Drop-down  Navigation bar