drop down navigation

        After creation of simple navigation bar we will create a drop down navigation bar. A menu item that have its sub-menu item then you will need a drop down navigation bar. So , finally we are going to create a drop down navigation bar. If you have remember the code for navigation bar , so we use li:hover attribute in drop down navigation bar . So our code becomes as given -
           

<style type="text/css">
.menu ul { list-style:none; font-size:26px; }
.menu ul li { position:relative; float:left; }
.menu ul li a { text-decoration:none; padding:12px 12px 12px 12px; color:#ffffff; display:block; text-align:center; border-right:2px solid #456745; border:1px solid#467746; width:150px; background:#333333; }
.menu ul li a:hover { color:#aa2233; display:block; height:32px; background:#778877; }
.menu ul li ul { display:none; }
.menu ul li:hover ul {font-size:26px; display:block; position:absolute; top:56px; min-width:120px; left:-36px; }
.menu ul li:hover ul a {display:block; background:#000; color:#ffffff; width:144px;}
.menu ul li:hover ul li a:hover {display:block; width:148px;background:#666666; color:#aacc99;}
</style>


       The text with hyper color is new code included in previous code used in navigation bar . Include this code in your webpage and check it . To run this css your HTML list format will be as -


<div class="menu">
<ul>
<li>
<a href="#">home</a> 
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
</ul>
</li>
<li>
<a href="#">contact</a></li>
</ul>
</div>


      Here watch the HTML code carefully I use nested list to create sub-menu items html and css of menu item home .
      I have tested this code with browser google chrome with version 19.0.1084.52 and netscape navigator 9 . If you have some problem with this code then contact us and tell about your problem . We would like to answer you.
     If you want to check my previous post on code of navigation bar then click here -  navigation bar .
     If you want to apply this navigation bar on blogger then check it  - navigation bar on blogger .
                                                                                   
                                                                                                  - Thanks to visit .