Horizontal drop down menu

Many bloggers needed their blog more graphically professional.To this idea,i added here another css script to create horizontal menu bar with drop down facility.Now create drop down menu bar within ten seconds!!. Last week i posted a horizontal menu bar code.
You need just

  • Copy this code paste it to "HTML/SCRIPT" gadgets.
  • Then hit on save.
  • Done!!!


<style type="text/css">

/*Credits: Blogxool.blogspot.com */
/*URL: http://www.blogxool.blogspot.com */
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(http://www.cssmenumaker.com/menus/062/images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #f68618;
border-right:2px solid #f68618;
border-bottom:2px solid #f68618;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(http://www.cssmenumaker.com/menus/062/images/current-bg.gif) top left repeat-x;
color:#ffffff;
}

</style>
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>


This sample contain only one model,If you want more models with more variety ,
Click here.
This webseite contain all types of  Menu bar that match with your Blog.




Thanks
Enjoy!

By : Sooji
Category:

6 comments:

  1. can i change the pictures ?

    ReplyDelete
  2. Thanks,
    It is very easy to apply

    ReplyDelete

  3. You can change the picture.For more option Visit here.

    ReplyDelete
  4. @Haseeb

    Thanks for compliment

    ReplyDelete
  5. Superb Useful and straight forward! Thanks!

    ReplyDelete

Type your Comment Here...!