.....

178 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes

Add drop down menu in blogger you need is just a little bit of CSS and HTML code and put that code at the right place in your blog and done.Here is a list of 17+ Horizontal CSS Drop down menus.May exist between blogger friends who find difficulty in putting the CSS code in the template editing stages,for it to post this time I tried to give a mild solution of horizontal CSS drop down menus.adding drop down menus in blogger can benefit your readers to find out the intended Posts of the blog with ease.so lets start now introducing the menus one bye one, whichever you like just copy code and paste the code.






UPDATE: I updated some of my posts, this post I update 35+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes ..........





















Note: Simply follow these steps carefully,All Navigation Menus below uses two pieces of codes.One is The HTML code which is responsible for positioning the menus and the second is the CSS code which is responsible for the look and feel of the menus.Paste the CSS code for your selected Menu just above ]]></b:skin> and the HTML code Go To Design > Page Elements > Click Add a Gadget or Add a Page element > Choose HTML/JavaScript widget >Simple Paste Your HTML code inside HTML/JavaScript widget and Click Save.






Here's the code 17+ Drop Down Menu




1. Massive Blue Drop Down menu 





HTML CODE:



<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>




CSS CODE:



.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}










2. Sunrise Gloss Drop Down Menus 







HTML CODE:



<div class="nav-container-outer">

<img src="http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJOxMlB1I/AAAAAAAAAKw/hXZ77KQnoT8/s1600/nav-bg-l.jpg" alt="" class="float-left" />

<img src="http://3.bp.blogspot.com/_jM8-wHc3NKY/TQtJQzrYfsI/AAAAAAAAAK0/Wv8PRzkfPV8/s1600/nav-bg-r.jpg" alt="" class="float-right" />

<ul id="nav-container" class="nav-container">

<li><a class="item-primary" href="#">HOME</a>

</li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Products</a>



<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Quality</a>



<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Services</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Very Long Item</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Fully Flexible</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>

<li class="clear">&nbsp;</li></ul>

</div>






CSS CODE:



@charset "utf-8";

/* CSS Document */



body{

padding: 25px;

}



/*^'^ Navigation Structure ^'^*/

.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJNaPc62I/AAAAAAAAAKs/2BmTvxN4wyk/s1600/nav-bg.jpg);

}

.float-left{

float: left;

}

.float-right{

float: right;

}

.nav-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.nav-container .divider-vert{

float:left;

width:0px;

display: none;

}

.nav-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:left;

line-height:0px;

display:block;

float:none;

}

.nav-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.nav-container a, .nav-container li{

float:left;

display:block;

white-space:nowrap;

}

.nav-container div a, .nav-container ul a, .nav-container ul li{

float:none;

}

.nav-container ul{

left:-10000px;

position:absolute;

}

.nav-container, .nav-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.nav-container li a{

float:none

}

.nav-container li{

position:relative;

}

.nav-container ul{

z-index:10;

}

.nav-container ul ul{

z-index:20;

}

.nav-container ul ul ul{

z-index:30;

}

.nav-container ul ul ul ul{

z-index:40;

}

.nav-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

left:auto;

}

#nav-container ul {

top:100%;

}

#nav-container ul li:hover>ul{

top:0px;

left:100%;

}



/*^'^ Primary Items ^'^*/

#nav-container a{

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJCLgoSeI/AAAAAAAAAKU/FhQy3kYe0gY/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}



#nav-container a:hover{

color: #6C3600;

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJCLgoSeI/AAAAAAAAAKU/FhQy3kYe0gY/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}



/*^'^ Secondary Items Container ^'^*/

#nav-container div, #nav-container ul{

padding:10px 4px 10px 4px;

margin:0px 0px 0px 0px;

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQtJG25BI4I/AAAAAAAAAKg/iHBVUZh_3gk/s1600/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}



/*^'^ Secondary Items ^'^*/

#nav-container div a, #nav-container ul a{

padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJFWzovvI/AAAAAAAAAKc/Tkea8FvVTN4/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}



/*^'^ Secondary Items Hover State ^'^*/

#nav-container div a:hover, #nav-container ul a:hover{

background-color: #FFFFFF;

background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJFWzovvI/AAAAAAAAAKc/Tkea8FvVTN4/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}



/*^'^ Secondary Item Titles ^'^*/

#nav-container .item-secondary-title{

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJJ7mPTAI/AAAAAAAAAKo/TjeE_jkB_rs/s1600/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}



/*^'^ Horizontal Dividers ^'^*/

#nav-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}



/*^'^ Vertical Dividers ^'^*/

#nav-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}










3. Blue Dawn Drop Down 





HTML CODE:



<div class="wrapper1">

<div class="wrapper">

<div class="nav-wrapper">

<div class="nav-left"></div>

<div class="nav">

<ul id="navigation">

<li class="active">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Home</span>

<span class="menu-right"></span>

</a>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Blog</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Archives</a>

</li>

<li>

<a href="#">Categories</a>

</li>

<li>

<a href="#">Top-rated Posts</a>

</li>

<li>

<a href="#">Most-viewed Entries</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Development</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Wordpress Themes</a>

</li>

<li>

<a href="#">Wordpress Plugins</a>

</li>

<li>

<a href="#">Mac OS X</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Tutorials</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Photoshop</a>

</li>

<li>

<a href="#">Illustrator</a>

</li>

<li>

<a href="#">Css, Html</a>

</li>

<li>

<a href="#">Post Your Tutorial!</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Gallery</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Personal Photos</a>

</li>

<li>

<a href="#">My Friends</a>

</li>

<li>

<a href="#">Tech</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Portfolio</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">My Works</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="last">

<a href="">

<span class="menu-left"></span>

<span class="menu-mid">Contact</span>

<span class="menu-right"></span>

</a>

</li>

</ul>

</div>

<div class="nav-right"></div>

</div>

<div class="content">

<p>&nbsp;</p>

<p>&nbsp;</p>



</div>

<div class="content-bottom"></div>

</div>

</div>







CSS CODE:



.wrapper1{

color: #44433f;

font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;

margin: 0;

padding: 4px 0 0;

}

.wrapper1 a{

color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmFxQxnOI/AAAAAAAAAHo/WeNb4h2lTcY/s1600/nav_bg.png) repeat-x;

float: left;

}

.nev-wrapper {

clear: both;

float: left;

}

.nav-left {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmHgvXrfI/AAAAAAAAAHs/0C36haanf_o/s1600/nav_left.png) no-repeat top left;

float: left;

width: 11px;

height: 41px;

}

.nav-right {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmIzag1WI/AAAAAAAAAHw/qNqgaojq4OI/s1600/nav_right.png) no-repeat top right;

float: left;

width: 11px;

height: 41px;

}

.nav ul {

/*width: 648px;*/

height: 38px;

float: left;

margin: 0;

padding-top: 3px;

list-style: none;

font-size: 15px;

}

.nav li {

float: left;

padding: 0 7px;

background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmP8wgFmI/AAAAAAAAAIA/wdf4DZhsFKg/s1600/split.png) no-repeat right center;

position: relative;

z-index: 1;

}

.nav li.last {

background:none;

}

.nav li:hover {

z-index:2;

}

.nav li a {

display: block;

line-height: 38px;

overflow: hidden;

float: left;

}

a .menu-left {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsl3yDJRkI/AAAAAAAAAHQ/hZkoiBamxso/s1600/menu_left.gif) no-repeat left top;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-mid {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsl7c8ppBI/AAAAAAAAAHY/hxR8ObxBYmo/s1600/menu_mid.gif) repeat-x top left;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-right {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmCJ3D5iI/AAAAAAAAAHg/0y7-Wpz4C2o/s1600/menu_right.gif) no-repeat top left;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

.nav li a:hover .menu-left,

.nav li.active a .menu-left,

.nav li:hover a .menu-left,

.nav li a:hover .menu-mid,

.nav li.active a .menu-mid,

.nav li:hover a .menu-mid,

.nav li a:hover .menu-right,

.nav li.active a .menu-right,

.nav li:hover a .menu-right {

background-position: 0 -37px;

line-height: 35px;

}

.nav li a:hover,

.nav li.active a,

.nav li.hover a,

.nav li:hover a {

color: #09548B;

}

.nav li:hover .sub,

.nav li.hover .sub {

display:block;

}

.nav li .sub {

display: none;

position: absolute;

top: 27px;

left: 6px;

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmUJr-yhI/AAAAAAAAAIM/OihvjAeTyG8/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmRpDHDsI/AAAAAAAAAIE/ADndeR5TGu8/s1600/submenu_bg.png) repeat-y;

width: 162px;

height: auto;

margin: 0;

padding: 0 12px 10px;

list-style: none;

font-size: 14px;

}



.nav li:hover li,

.nav li.active li {

width: 100%;

padding: 1px 0 2px;

border-bottom: 1px #C1D9F0 dashed;

background: none !important;

}

.nav li:hover li a,

.nav li.active li a {

color: #09548B;

background: none !important;

line-height: normal;

width: 156px;

padding: 8px 3px 3px;

text-indent: 1px;

}

.nav li:hover li a:hover,

.nav li.active li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/*IE*/

.nav li li a:hover,

.nav li li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/**/

.nav .btm-bg {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmS3dJfYI/AAAAAAAAAII/h8j3-QE6ElE/s1600/submenu_bottom.png) no-repeat;

width: 205px;

height: 9px;

overflow: hidden;

clear: both;

}

.content {

width: 670px;

background: transparent url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQslwVgdWcI/AAAAAAAAAHA/hPtWaiguCKQ/s1600/content_bg.png) repeat-y;

float: left;

padding: 10px 20px;

}

.content h1 {

color: #333;

font-weight: 400;

text-transform: uppercase;

font-size: 18px;

border-bottom: 1px dashed #C1D9F0;

}

.content h2 {

font-weight: 400;

text-transform: uppercase;

font-size: 14px;

padding-left: 10px;

margin-bottom: -5px;

}

.content p {

padding: 0 15px;

text-align: justify;

}

.content-bottom {

width: 710px;

background: transparent url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQslyLtUh4I/AAAAAAAAAHE/KjmSaXhHWuw/s1600/content_bottom.png) no-repeat;

height: 13px;

float: left;

}








4. Blue Center Drop Bar 







HTML CODE:



<div class="nav">

<div class="table">



<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>



<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</div>

</li>

</ul>



<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

</ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

</ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

</ul>

</div>

</li>

</ul>



</div>

</div>



<br />








CSS CODE:



.nav {

height:35px;

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQspKEXsD1I/AAAAAAAAAIU/XP4RobAgtGk/s1600/bg.gif) repeat-x;

position:relative;

font-family:arial, verdana, sans-serif;

font-size:11px;

width:100%;

z-index:100;

margin:0;

padding:0;

}



.nav .table {

display:table;

margin:0 auto;

}



.nav .select,

.nav .current {

margin:0;

padding:0;

list-style:none;

display:table-cell;

white-space:nowrap;

}



.nav li {

margin:0;

padding:0;

height:auto;

float:left;

}



.nav .select a {

display:block;

height:35px;

float:left;

font-weight:bold;

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQspKEXsD1I/AAAAAAAAAIU/XP4RobAgtGk/s1600/bg.gif);

padding:0 30px 0 30px;

text-decoration:none;

line-height:35px;

white-space:nowrap;

color:#2b3238;

}





.nav .select a:hover,

.nav .select li:hover a {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQspLavFDgI/AAAAAAAAAIY/zrZHi0-MtYY/s1600/hover.gif);

padding:0 0 0 15px;

cursor:pointer;

color:#2b3238;

}



.nav .select a b{

font-weight:bold;

}



.nav .select a:hover b,

.nav .select li:hover a b {

display:block;

float:left;

padding:0 30px 0 15px;

background:url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQspLavFDgI/AAAAAAAAAIY/zrZHi0-MtYY/s1600/hover.gif) right top;

cursor:pointer;

}



.nav .select_sub {

display:none;

}



/* IE6 only */

.nav table {

border-collapse:collapse;

margin:-1px;

font-size:1em;

width:0;

height:0;

}



.nav .sub {

display:table;

margin:0 auto;

padding:0;

list-style:none;

}



.nav .sub_active .current_sub a,

.nav .sub_active a:hover {

background:transparent;

color:#2b3238;

}



.nav .select :hover .select_sub,

.nav .current .show {

display:block;

position:absolute;

width:100%;

top:35px;

background:url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQspIwXKEeI/AAAAAAAAAIQ/bJfrojOh8GE/s1600/back.gif);

padding:0;

z-index:100;

left:0;

text-align:center;

}



.nav .current .show {

z-index:10;

}



.nav .select :hover .sub li a,

.nav .current .show .sub li a {

display:block;

float:left;

background:transparent;

padding:0 10px 0 10px;

margin:0;

white-space:nowrap;

border:0;

color:#2b3238;

}



.nav .current .sub li.sub_show a {

color:#2b3238;

cursor:default;

}



.nav .select .sub li a {

font-weight:normal;

}



.nav .select :hover .sub li a:hover,

.nav .current .sub li a:hover {

visibility:visible;

color:#73a0d2;

}








5. Blue Impression Drop Down Menu 









HTML CODE:



<ul class="menu">

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>







CSS CODE:



.bg {background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsqYv9n9TI/AAAAAAAAAIk/oiiHv79iBCk/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }

.menu li.top {display:block; float:left; position:relative;}

.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}

.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsqd0O5eNI/AAAAAAAAAIw/qhsKMaaJL20/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqbaw12UI/AAAAAAAAAIs/u7l_QWB3Ruc/s1600/button4a.gif) no-repeat right top;}



.menu li:hover > a.top_link {color:#000; background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqbaw12UI/AAAAAAAAAIs/u7l_QWB3Ruc/s1600/button4a.gif) no-repeat right top;}



.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}



.menu a:hover {visibility:visible;}

.menu li:hover {position:relative; z-index:200;}



.menu ul,

.menu :hover ul ul,

.menu :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}

.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}

.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}

.menu :hover ul.sub li a.fly {background:#fff url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsqVzs-dBI/AAAAAAAAAIc/nCJLoz72b2Q/s1600/arrow.gif) 80px 7px no-repeat;}

.menu :hover ul.sub li a:hover {background:#95d2ee; color:#fff;}

.menu :hover ul.sub li a.fly:hover {background:#95d2ee url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqXRNVRmI/AAAAAAAAAIg/d_73a7oZpH4/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#95d2ee url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqXRNVRmI/AAAAAAAAAIg/d_73a7oZpH4/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul :hover ul

{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}






6. Green Impression Drop Down Menu 





HTML CODE:



<ul class="menu">

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>







CSS CODE:



.bg {background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQstCprwulI/AAAAAAAAAI8/SPMsyPHibmk/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }

.menu li.top {display:block; float:left; position:relative;}

.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}

.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQstHWj4QOI/AAAAAAAAAJI/0EP4r653Y3U/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQstFxKLtQI/AAAAAAAAAJE/AaclOFJ20kI/s1600/button4a.gif) no-repeat right top;}



.menu li:hover > a.top_link {color:#000; background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQstFxKLtQI/AAAAAAAAAJE/AaclOFJ20kI/s1600/button4a.gif) no-repeat right top;}



.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}



.menu a:hover {visibility:visible;}

.menu li:hover {position:relative; z-index:200;}



.menu ul,

.menu :hover ul ul,

.menu :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}

.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}

.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}

.menu :hover ul.sub li a.fly {background:#fff url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQss_-g_XhI/AAAAAAAAAI0/2X1cr1UjJJk/s1600/arrow.gif) 80px 7px no-repeat;}

.menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}

.menu :hover ul.sub li a.fly:hover {background:#42c555 url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQstA0Fq5gI/AAAAAAAAAI4/iixY27DoBEI/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#42c555 url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQstA0Fq5gI/AAAAAAAAAI4/iixY27DoBEI/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul :hover ul

{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}








7. Grey Impression Drop Down Menu 







HTML CODE:



<ul class="menu">

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>







CSS CODE:



.bg {background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsvw7MKOQI/AAAAAAAAAJU/w8DkeVrGAvU/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }

.menu li.top {display:block; float:left; position:relative;}

.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}

.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsv4SuYGyI/AAAAAAAAAJg/wmJM2Itng54/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsv0jR1qyI/AAAAAAAAAJc/y7dEWaJx5ZQ/s1600/button4a.gif) no-repeat right top;}



.menu li:hover > a.top_link {color:#000; background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsv0jR1qyI/AAAAAAAAAJc/y7dEWaJx5ZQ/s1600/button4a.gif) no-repeat right top;}



.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}



.menu a:hover {visibility:visible;}

.menu li:hover {position:relative; z-index:200;}



.menu ul,

.menu :hover ul ul,

.menu :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}

.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}

.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}

.menu :hover ul.sub li a.fly {background:#fff url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsvpPMSx4I/AAAAAAAAAJM/je9EQ9t8kZI/s1600/arrow.gif) 80px 7px no-repeat;}

.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}

.menu :hover ul.sub li a.fly:hover {background:#999999 url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvq5mWSrI/AAAAAAAAAJQ/CqfByxNrLWU/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#999999 url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvq5mWSrI/AAAAAAAAAJQ/CqfByxNrLWU/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul :hover ul

{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}








8. Blue Tabbed Drop Down 





HTML CODE:



<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>






CSS CODE:



.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://2.bp.blogspot.com/_jM8-wHc3NKY/TQtAu6UjDEI/AAAAAAAAAJo/bk_C9T7IF54/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

}

.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 #0079b2;

border-right:2px solid #0079b2;

border-bottom:2px solid #0079b2;

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;

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://3.bp.blogspot.com/_jM8-wHc3NKY/TQtAtX3PdII/AAAAAAAAAJk/syUHkWP9X6Q/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}








9. Yellow Tabbed Drop Down Menu 







HTML CODE:



<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>








CSS CODE:



.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://1.bp.blogspot.com/_jM8-wHc3NKY/TQtkYSLCYQI/AAAAAAAAAK8/pdp-q2b5mtw/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

}

.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 #0079b2;

border-right:2px solid #0079b2;

border-bottom:2px solid #0079b2;

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;

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://1.bp.blogspot.com/_jM8-wHc3NKY/TQtkTARNJFI/AAAAAAAAAK4/uDZCtCg7cdQ/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}








10. Tabbed Grey Drop Down 





HTML CODE:



<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>







CSS CODE:



.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://1.bp.blogspot.com/_jM8-wHc3NKY/TQtCUJlJEMI/AAAAAAAAAJ4/i-V-EPxJWm8/s1600/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 #9f9f9f;

border-right:2px solid #9f9f9f;

border-bottom:2px solid #9f9f9f;

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://3.bp.blogspot.com/_jM8-wHc3NKY/TQtCSn9IQ-I/AAAAAAAAAJ0/BhM1AbQulYY/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}







11. Red Tabbed Drop Down 







HTML CODE:



<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>







CSS CODE:



.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://1.bp.blogspot.com/_jM8-wHc3NKY/TQtC4DDAU9I/AAAAAAAAAKA/ZLj3-XOPhUw/s1600/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 #a80329;

border-right:2px solid #a80329;

border-bottom:2px solid #a80329;

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://4.bp.blogspot.com/_jM8-wHc3NKY/TQtC2LGdLXI/AAAAAAAAAJ8/aQLTUDPliLU/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}






12. Black Tabbed Drop Down 







HTML CODE:



<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>







CSS CODE:



.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://3.bp.blogspot.com/_jM8-wHc3NKY/TQtECmlWEXI/AAAAAAAAAKI/RbUGeX5EOMY/s1600/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 #000000;

border-right:2px solid #000000;

border-bottom:2px solid #000000;

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://3.bp.blogspot.com/_jM8-wHc3NKY/TQtEBSVFG-I/AAAAAAAAAKE/HkOKUcTXrn4/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}







13. Orange Tabbed Drop Down 







HTML CODE:



<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>








CSS CODE:



.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://2.bp.blogspot.com/_jM8-wHc3NKY/TQtEnUze_WI/AAAAAAAAAKQ/ZhIl_LlVpqo/s1600/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://2.bp.blogspot.com/_jM8-wHc3NKY/TQtEl6T6RkI/AAAAAAAAAKM/M3-gNYBrYE8/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}







14. Simple Red Drop Down Menus 







HTML CODE:



<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>







CSS CODE:


div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }








15. Simple Black Drop Down Menus 







HTML CODE:



<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>







CSS CODE:



div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }








16. Simple Blue Drop Down Menus 







HTML CODE:



<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>







CSS CODE:



div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }








17. Simple Green Drop Down Menus 







HTML CODE:



<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>






CSS CODE:



div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }






















Select Any one menu from the above given list





How To Add Drop Down Menu Widget To Blogger


1. Go To Blogger > Design

2. Click Add a Gadget or Add a Page element

3. Choose HTML/JavaScript widget

4. Simple Paste the Navigation Menu Code inside HTML/JavaScript widget

5. Hit Save

6. Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,




To change the links, Edit this part of the HTML in all codes below,


<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>


Replace the hash(#) sign with your Page Links /URL and replace Home, Products, Drop Down CSS Menus etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,
<li><a href="#">Home</a></li>






How to Add CSS for Menu:-



Instructions To Follow:
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"





- Find this type of code ]]></b:skin> and just before paste this CSS Code:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/s1600/seperator.gif") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/s1600/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/s1600/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/s1600/hover_sub.gif') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}





Now Click Save Template





That's Done! Hope this Post will be helpful for Blogspot Users.










Many thanks to cssmenumaker for making this code and I just tested and modified to work on blogger

Free Backlinks for Blog and Website

Do you want to know Where to get free backlinks? This is a free, fast, and simple immediate automatic backlinks for optimizing your blog or web page on search engines result.Everyone knows how important backlinks are to getting a good rank.Here, we offer a backlink for free and very fast for your sites. Copy the html code first (no change needed), and then paste to your website or blog.To view your backlink you can click the image link from your website or blog. And well... your website url done and will be displaying in first references.If any visitors click this banner from your website or blog, your url backlink will be creating automatically in this website.You can build backlink as many as you want, no limitation and restriction, but no spam ! Wish your website's ranking quickly on Top Google, Yahoo and Alexa!

Free Automatic Backlink for Blog and Website

If our Tutorials have helped you a little, then kindly spread our voice using the badge below:- Copy this html code to your website >>
Free Backlinks blogger widgets



Optionally use this Widget installer to add this link to your blogger blog.

* Please note:- After you paste the code into the website, please click on the button to create backlinks to your website. - If you remove the code from your website where your backlink will be deleted automatically. - if you know any free backlink info, please submit here, Let's share the free backlink list to everyone.
submit here

178 Responses So Far:

Bloggertricksandtoolz said...

hi freind..your blog is great.friend do you like exchange ads banner..i hope get some trffic my contry to yor blog..please contact me (sameera.blogzz@gmail.com)

thanks

PRAVASI said...

HAI
FRIEND ARE WANT ADV TO MY SITE FOR FEE FIRST I WANT UR EMAIL ADDRESS. THEN WILL MORE...HURRY
MY SITE WWW.AMAZINGVIDEO.TK

PRAVASI said...

HAI
ARE WANT ADV TO MY SITE FOR FREE ,FIRST I WANT UR EMAIL ADDRSS.....MY MAIL ABDULRAZAK1010@GMAIL.COM
WEB: WWW.AMAZINGVIDEO.TK

Halim Pranata said...

cool bro..... thx before.... please follow me.....

Claire said...

It works great, but I am having a hard time changing the background colors. I'd like the background for all of the tabs (the standalone and drop down) to have the light grey background of the stand alone pages. I tried changing both the url in the code to a new url but the only change is for the drop down tabs. Other than that this menu works perfectly and I'd love to keep it.

http://clairedelaluz.blogspot.com

saboo said...

hey, bro thanks for this awesome bars but i wanna to make the buttons on right as iam blogging in arabic could u help me plz ?
here is example : http://shbab25.blogspot.com/

saboo said...

very nice bro but could i reduce the width of the tab and plz tell me how to do this ?
thx man

saboo said...

thx man , but i want to reduce the width of the widget so tell me how i do this plz .... thx again

website designer uk said...

Thanks a lot for sharing this nice post!You’ve done really excellent job!

Vegabond "Yayawar" said...

thnks Dudue:)

GSMC GYMKHANA said...

THANKS. Cn you help me with this problem. The options do not fall down on my blog. Help required SOS.
My blog address is gsmcgymkhana2.blogspot.com

Share it to said...

Nice theme I'm gonna use it on my next site. I loved the layout and design of the site. Share it to each other is my current website and I am constantly conscious of it's design factor. Thanks.

webdesign said...

Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.web development company in india

Stan said...

What to do if those drop down menus don't show?? i tried to change z-index, but no luck..

Ahmad said...

hi there...
I just copy css & html "Sunrise Gloss Drop Down Menus"

but it does not work with drop down...
can you help me?

Hunny Kitty said...

@GSMC GYMKHANA

i have the same problem too....
my blog : http://dia-honey.blogspot.com

sampetrova said...

thank you for the post..
thanks a lot for sharing this.
web designer india

dipankarchetia said...

It's awesome ,but having trouble with changing background colours... can i get a help... any way thanks..

dipankarchetia said...

How Can I add these to my website... ?

Rocker453 said...

Lovely tutorial! However I'm having some alignment problems. I want the menu to be across the whole page and the tabs to be in the middle of the menu. Please help me out!

Rocker453 said...

I fixed the problem myself! Have a look at http://www.rocker453.blogspot.com/

Aazib said...

I still don't get it. I have tried almost every method available on the Internet but this drop down menu thing is not acceptable to my blog template. When I will change my template I will surely do this again.

ItsMe said...

Here I have blog provide menu script too

http://designedmenus.blogspot.com/

shaik shanwaz said...

wonderful information dude..thanks

jual obat herbal said...

saya tidak mengerti...
makasih

waqas baig said...

thnx dear, i have add menu in my blogCode-Solutions and its working fine for me. thnx

Don Mashak - The Cynical Patriot said...

Will this code allow the ability to navigate on the same page? specifically to particular html gadgets?

Thanx in advance,

Don

http://usfederaljudiciarytarfreepressnews.blogspot.com/
http://donmashakrichmondvirginiaindependent.blogspot.com/
http://WETHEPEOPLETAR.blogspot.com

MommyVoNuff said...

This isn't working for me. I got the gadget up..but I don't know what "link" to put for the drop down menu. That would be a search result on my blog for example "beauty" or "pets" right?

web design company said...

These widgets would help many newbies to extract some new ideas for designs in drop down menu for bloggers.It seems to be very informative with ur widgets.

♛IMRAN ♥ ALAM♛: said...

Wonderfull And Very Helpfull Thanks And Congratulation for this nice blog

movies download for free said...

download movies songs games for fre
http://mediafirehollywoodmovies.blogspot.com/

Dzulkiffly Abdullah Munir said...

THANKS BRO...MY BLOG LOOKS GREAT!!

cheap smartphone said...

I try aplly the script on my page and it looks good except submenu colour blended with text...
is this script just work on some templates, please give some advice which template match with this script.
thanks

Richard said...

Can anyone help, I have installed the simple red drop down menu bar which I like a lot, but the spacing between menu items is just too much. In other words
The way it looks now is
Home...........About..........Products.........Etc
I want it to look
Home About Products Etc
How do I get the spaces out.
Many Thanks

Nino said...

Thanks a lot Buddy...

apschool.tk said...

Menu is Good But it works in Firefox not working in Explorer How to make it works in Explorer also ////

Luqman Kusumahdilaga said...

Assalamualaikum Wr. Wb

Hey Dude.
I have been applying it on my blog
And Success.
I am very grateful.
But will you give your css code because I saw your blog is very nice.
Could you, please?

See it on http://merahmarunluck.blogspot.com/

Sopiyan Sopiyan said...

I find this post very very useful. It's great.Thank for sharing.

mAn ĐiezEl said...

thaks post ful
pls visit me:http://thephotobest.blogspot.com/

Sopiyan Sopiyan said...

I have tried jquery slideshow but the menu dropdown is hidden (blocked by the slideshow). Does anyone know what to do with it?

Anonymous said...

Hi, I have tried the dropdown menu but I still do not know how to edit my web html since I have no access to edit it. I am using b2evolution blog template. Please help.

http://lampunginfo.com

blogger tools said...

great .. make blogger lok nice .. thanks

alrick said...

great its good
http://www.drupalnetworks.com/

ilmu said...

hei, come to my blog, dalamrenunganku.blogspot.com

M.Shoaib said...

Its not working in Internet Explorer 8. The drop down menu hide behind the post in IE. Please tell me how to fix it?

Kate said...

It's alway vertical. What am I doing wrong?

renu said...

Hi haveadd the menu items it's working but when I add the sub menu's for pages iit's not displaying the drop down menu option plz help me.....

Mas Mur said...

Thanks for your information...this is nice blog's..

sharearazam said...

love it

kailash said...

Thanks for posting, this is awesome!

Elinor Bygg said...

Why wont the drop down work?
Can someone plz explain to me how to make it work?!

Web Development Scottsdale said...

I loved the drop down menu effect.
Thanx.

Imam Basyori said...

gan cara bikin postingan biar bisa di tari itu gimana,..?

Software Akuntansi Laporan Keuangan Terbaik said...

thank lagi cari menu nav ne , ...

AKidNamedChance said...

Hello when I do this, the site doesn't really show the tabs going down it looks like they are getting covered up by something. http://freehrs.blogspot.com

ΣΤΑΥΡΟΣ ΠΑΠΑΓΕΩΡΓΟΠΟΥΛΟΣ said...

thanks man i use the 12 one and it's amazing

tourist-destinations.com said...

I am going to use number 7 on my site. Thanks for the effort.

Saimoom (Shine Mark) said...

Ever green post. Nice. This menus are very cute. Keep it up.

http://adf.ly/msMG
http://shinemark.blogspot.com

Anand@Techlove said...

helpful post... Thanks lot for these wonderful menus codings

download software Full crack said...

nice post anyway you cool man :) i must try that.. all i need just for that drop down style hehe

sarannu said...

thank yu for posting

Anulaa89 said...

Everything would be okay if I did not spoil the top of the template :(

prasanth said...

thanks for the good article man........ really awesome post. www.cyberfinger.blogspot.in

buatblogKangroes said...

nice article, my blogg need it, pembuatan blog become easy.

BuatblogKangroesTea said...

Tutorial pembuatan dropdown blogspotnya lengkap banget ya..
thanks for share. sukses selalu

Palanta Budaya said...

coba dulu ah

Ceu Thawng Lian said...

I like that this website!!!!!!!

Adi said...

Nice info. Very good for my blog.
Thanks

Partha said...

good idea
copy paste work not yet done

Abdul Samad said...

Thanks for this awesome widget

Arfha said...

Aku Mau Coba Dulu Ahhh,,,,

Oh ya gan berkunujung balik ya di my Blog

ARFHA MP3™ | Mp3 World Music Downloads
Thank You

Kirk Vin said...

Hi the back ground color is not changing, Please help.

Lycanbd said...

Ok...i will try that on my blog...
Thanks

Cesar Crash said...

I tried to use this code because the color of my menu is very different of what I wish it o be. Using any of this codes, it stays in the same grey color as the custom menu. What should I do, any clue?
http://cesarcrash.blogspot.com

PyhscoChic said...

Hello....i been trying for several time but the it not dropping down as it should . Could help please

my blog- http://2eyes24eyes.blogspot.com

SCHOOL-PAGE said...

its not working at firefox and google crome
its working at Microsoft Internet Explorer only
what should i do to work at all

mobilegoogly said...

great aritcal on drop down menu very infromative and varied lots of choices as per the requirement
thank from www.youtubeviralvideos.in

Sandy said...

Wow thanks for doing all this and for sharing it. This has been extremely helpful.

Nguyễn Hải ™ said...

Download Softwares Full Crack

Admin said...

teşekkürler

http://yuklex.blogspot.com/

Akshay said...

Hey it really worked. Thanks a lot man.I knew a bit of HTML so i changed the entire code to suit my style. Check it out here www.techytk.blogspot.in and for the code, contact me

Biografi TheHistuzal Maru said...

Ga Ngerti Pas Masukin Kode Yang Panjang Pas Di Masukin Malahan Banyak Tulisan Di atas Tolong Bantu,,

flash to html5 converter said...

Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.

shadow_ken said...

umm.. dude, i hope, i really hope you'd notice that the drop down menu number 15. Simple Black Drop Down Menus color turns out to be red.. yes, red.. not black..

mamang suryadi said...

Thanks ya masbrowwwwwwwwwww

HÌNH NỀN ĐIỆN THOẠI said...

thanks for posted

Please, visit my home page: http://lapmagfpt-vnpt.com/

website design said...

Great post. I really appreciate your blog. Thanks

SuhuPTC said...

it's work. now my blog looks more cool. thank you

Jasmin Anderson said...

Thank you. i got u. but i found a easy way by my self.
i want to know about black links.

Navneet Teotia said...

hey..

how do we change its position , for eg i have a 1200 px title and i want to to make it 1200 px too in center

so how do we do it?

Mehta Mihir said...

Plz help me,I used your customize menu but When I clicking the custom tabs, it can't show the drop down list.What should i do...?

luwengkidul said...

nice bro...

Gitar Malaya said...

hi...i tried alter the code myself but the drop menu become like this....any suggestion?
http://gitarmalaya.blogspot.com/

website-ideas said...

dude..... thank you very much...... Thanks for the awesome menus...... great work man.,.....

Gerard den Hertog said...

Thanks for the code, but somehowe it doesn't seem to work for me. I used the Massive Blue Drop Down menu. There is a gap between the topmenu and submenu. When i try to hover from the menu tot the submenu the mousepointer crosses the gap and the submenu disappears. please help

Anonymous said...

Appreciate this post. Let me try it out.
Here is my webpage - Wicked Broadway Show

Hammad Baig said...

Awesome dropdown menus navigation thanks bdlab

Manoj Singh said...

Excellent blog, I like it. A lot of useful information. Thanks to the author. More on this topic thank you and Good day, everybody!

Moksha Yadav said...

the man is taking back links from u guys mind it

Sabbir Ahmed said...

Thank You..Gsmmb

Unknown said...

Hi there, Just needed to mention your website is particularly excellent and I genuinely like the blog style and design. Is it a customized design or some theme I can down load also? helium boy apk

Kumpulan Aplikasi Gratis | Free Ware said...

thank you very much bos !,i so need this !

i know if make dropdown menu is have javascript...,but No Have !

psd to html conversion said...

well drop down menu is hard for me. and what is Moksha yadav saying you getting backlink from us????

RIZWAN USMAN said...

hi thanks for sharing it........

also check my website....

www.mediafirefree.co.cc

Anonymous said...

Hello there, just became alert to your blog through Google,
and found that it is truly informative. I am gonna watch out for brussels.
I will appreciate if you continue this in future.
Many people will be benefited from your writing.
Cheers!
My web page - Ovarian Cyst Miracle Review

Anonymous said...

I love your blog.. very nice colors & theme.
Did you design this website yourself or did you hire
someone to do it for you? Plz answer back as I'm looking to create my own blog and would like to know where u got this from. cheers
Stop by my homepage - homes for sale in weslaco tx

Anonymous said...

My brother recommended I might like this website.
He was entirely right. This post actually made my day.
You cann't imagine just how much time I had spent for this info! Thanks!
Feel free to visit my blog post A Frame House Plans

search engine optimization said...

thank you very much for sharing this information i really need it..

Agen Bola said...

Mantap artikelnya, thanks for share.

pcvision said...

Woesome post Supper.... I also made a site pls go and seeeee pls... http://www.pc24help.blogspot.com

tik tok said...

Ini baru mantep tutorialnya..lengkap abisz !!!

Dexter said...

I Really Liked Blue Tabbed Drop Down . Thanks Alot for this

Anonymous said...

Everything is very open with a really clear clarification of
the issues. It was really informative. Your site is extremely
helpful. Many thanks for sharing!
Also visit my web-site wikilinks

free google search engine optimization said...

Nice explanation with great screenshots,,,,,very nice tutorials.

Anonymous said...

If some one wishes expert view regarding blogging and site-building then i suggest
him/her to pay a quick visit this blog, Keep up the fastidious job.
Look into my web page - Coupon Code

Anonymous said...

Thank you for writing this information within your website.
My web blog ... Digital Printing Melbourne

renu said...

Hi one and All.... just check out my blog for you kind info and to clarify you doubts...

http://livewickets.blogspot.in

windows8hacker.com said...

Simply great.

Thank you.

Nithin said...

Thanks pal nice post i like the green navigation widget.
After using that widget my look more good take look at my blog exefreeware.blogspot.in

saransh khanna said...


It’s really a great and helpful piece of info. I am happy that you just shared this helpful information with us. Please stay us informed like this. Thanks for sharing.
Web Designing Services

web design company said...

At a Global market place you will find multitude of places which would offer you array of services but we provides you professional services at an affordable rate. So, come and maximize benefits of your online presence and associate with us.

amisy said...

Screw Oil Press
http://www.oil-press-machine.com/product/oil_press/screw_oil_press.html
:) Thanks for share.

vandal camera said...

It is very helpful information of integrating drop down menu and side in your blogs.I have decided to create drop down menu in my blog.Thank you for sharing your great coding of drop down menu.

Anonymous said...

Go through along a get a thing or two about him.
. In the container of unsecured loans, the repayment timeframe is very short,
spanning two months.
Here is my page : instant payday loans uk

Meg Jones said...

mine isn't working please see my page... i am using watermark template- could this be the issue?
Thanks Meg from Unique Designs And Finds

john douglas cheap web design said...

Great post about this. I'm surprised to see someone so educated in the matter. I am sure my visitors will find that very useful.

Mitul said...

Blue Tabbed Drop Down is really awesome drop down menu . Really thanks alot .. i going to use it right now :)

Web Design said...

Amazing drop down menu widget....!!

Thanks for Sharing

Abdul Abbas said...

i have a problem wit my drop down menu , it cannot expand so same contents are hidden .what should i do?

NEW FREE SOFTWARE AUTO BACKLINK + 1 MILLION AUTO LIVE VISITORS said...

Your blog posts and articles are very interesting for me so inspired, and I hope you can last blog, so I can see the article and post your next blog, thank you for your info

OST Co., Ltd. said...

Nice blog posts and articles.

Kaki Gajah said...

nice post,,thank you for sharing the article

Bernard Mok said...

greeting, I have used your tutorial for a blog of mine and it is fantastic. Great work. But recently after google change the new look and I created another blog using the same drop drop menu it just doesn't work. the drop down tab hid behind the post. Any help appreciated.

1st blog : www.sucicare.blogspot.com
new blog ; www.http://gng4uglobal.blogspot.com

thanks
reply to sucare blog email

magentodevelopmentindia said...

I thank you for sharing.

Anonymous said...

Ι've been browsing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did, the internet will be much more useful than ever before.
my web site - finance

Anonymous said...

Hello, I wish for to subscribe for this blog to take newest updates,
so where can i do it please assist.
My webpage Work from Home

Anonymous said...

I have read so many articles or reviews regarding the blogger lovers however this paragraph is in
fact a pleasant piece of writing, keep it up.
my web site :: speed up my computer

Anonymous said...

I'll right away take hold of your rss as I can't in
finding your e-mail subscription link or newsletter service.
Do you have any? Kindly allow me know so that
I may subscribe. Thanks.
Also visit my web blog : free iphone

Digby Green said...

Your 17 Drop down menus look very good.

I have tried to implement the first one, I have entered the code in by hand.

Is the background gif necessary, I don't understand why it links to your site. Can we just substitute something else?

Thanks

Anonymous said...

Excellent, what a blog it is! This blog provides useful data to us,
keep it up.

mу site ... acupuncturists
Look at my blog post hot stone treatment

Anonymous said...

It's a pity you don't have a donate button! I'd most certainly donate to this brilliant blog! I suppose for now i'll settle for
bookmarking and adding your RSS feed to my
Google account. I look forward to brand new updates and will share this website with my Facebook group.
Talk soon!
Here is my page ; acne information

Jiyacreatives said...

Yes absolutely right your website information about Web Design & Development. No doubt Best Web Design is changing your Business Quality and revenus: we design a customer needs website & Deliver quality of Web Designing
HTML

Muhammad Mahtab Saleem said...

Nice styles , I have added #12 in my blog ,

http://www.onlinecorners.com

Bank Mandiri Bank terbaik di Indonesia said...

Keren.....Makasih Ya sob
╔══════════════════════════════════╗
║╔════════════════════════════════╗║
║║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░░▄▄░░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░█░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░█░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░█░░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░█░░░░█░░░░░░░░░░░░║║
║║░░░░░███████▄▄█░░░░░██████▄░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░███░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░███░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█████░░░░░░░░██░░░░░░║║
║║░░░░░█████▀░░░░▀▀████████░░░░░░░║║
║║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║║
║╚════════════════════════════════╝║
╚══════════════════════════════════╝

Qnando

Anonymous said...

Excellent blog you have here.. It's difficult to find good quality writing like yours these days. I seriously appreciate people like you! Take care!!
Also see my site - legitimate work for stay at home moms

Anonymous said...

I have read so many articles or reviews regarding the blogger lovers except this
paragraph is genuinely a fastidious piece of writing, keep it up.
My page - meratol review

web design india said...

Heya¡­my very first comment on your site. ,I have been reading your blog for a while and thought I would completely pop in and drop a friendly note. . It is great stuff indeed. I also wanted to ask..is there a way to subscribe to your site via email?


Web Design India

Taimoor said...

Thank you so much for this collection bro.
Bloggerjin

Daniel Benny Simanjuntak said...

Awesome widget! Keep it up.
Bloggers are expecting this types of widget.. Thanks! :)

Media buying houses said...

Hi ,
I enjoyed reading your blog with my partner. She loves the style and read so many fashion related news. I got your link from here. This is an excellent piece of writing.

Neel Raihan said...

Thanks pal nice post i like the green navigation widget.
After using that widget my look more good take look at my blog automatic backlinks

tonis said...

thank very helpful

http://teleteskariotakis.gr

plakat said...

Regards Gan nice post I am glad that the green navigation widget.
After using my widget looks now better see backlinks blog

thank you
Plakat and trophy

Adorn Consultants Pvd Ltd said...

Thanks for sharing this information.

Web Design Company In India

thinklala.blogspot.in said...

Thanks for your post i have implement it in my blog

Web Design Company India said...

The drop down menu you provided are just awesome. I will definitely use then in my upcoming projects. Good work and keep it up.

Detonator said...

thank you

عمل ايميل ياهو


طريقة عمل البيتزا

chat said...

Awesome widget! Keep it up.
Bloggers are expecting this types of widget.. Thanks! -:)

Rajdeep Singh said...

Thank you sharing this information thank you.Come back again for more interesting stuffs like one you got earlier!
Web Design Company India

Nithin said...

thanks dude nice work

second one is awesome its make my blog better look

take a look at my blog exefreeware

sadman said...

Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.

http://freebietemplate.com/css-designs/css-designs.html

have a nice day

Dikhabadi said...

thanks for share,

Vivoderm said...

thanks

B.Med said...

thank u its a great work... i have install one with some modification and it work perfectly...

http://le-fooot.blogspot.com/

Web Design Company India said...

Nice Post..Thanks for Sharing.

Web Design India said...

Added to my job and it worked fine. Great widget. Please share if you have similar.

Aleks Kos said...

THANKS BRO...MY BLOG LOOKS GREAT!! http://przepisy-po-angielsku-sortedfood.blogspot.com

Dudi Yana said...

yeah

Anil Kumar said...

nice post.... computer tricks

Web Design said...

I really like "Grey Impression Drop Down Menu". It can give a technology based website, a more futuristic realism. Thank you for sharing those menus and detailed customization.

Adorn Web design Company India said...

useful stuff ,. Thanks for sharing this post..

john jay said...


Great post i really appreciate this post because a student i really want to become a
Web Designer and i'm looking also Wordpress Courses i was planning
to learn more about wordpress also. but anyways i will keep update your site for more free informative post. thanks for this post it helps me a lot.


Anonymous said...

Spot on with this write-up, I honestly believe that this site
needs much more attention. I'll probably be back again to read
more, thanks for the advice!

Look into my weblog: buy soundcloud plays

xaverius said...

successfully! thank you very much for the tutorial

Rohan Mod said...

Awesome collection of codes and menus. It has lots of variations. Few of the menus are best for my entertainment websites. Keep up the good work.

Agus said...

nice article..... very good....i like.......success

saransh khanna said...

Great post, thanks for sharing..


Web Design India

Md Shahadat Hossen said...

Awesome collection of codes and menus.This is a Helpful Post i am Adding This Menu In My Site Thanks Techtunesu

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger