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

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

admin

11:00 AM

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

Live Demo

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYQWO2AgL-IfGZ_mqTAs43MEjAEnkdRgDMRngxFJZAdwEcRq9CKxMRIqIBkvMd8XWoEHcpQ2cb95d-NY4hf_fyViAp-2Ugh4Bee3hNc79sfHyNyxBBcVVYyL4IspWp0kvZmLltTrmn7Sf/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGeXueWZ7BpNBJsCQTheQwnt0Nv_mH8Hj1LdQyf_M7tZ2uRu4h0mVSRu0wCr33RKHfzv4R-LkQHdOjVHb5skTyVcmHzRm1wTNWBgvRvkIwO66G_PvlRdswOLJhqDJueAlf6s7ID_2_ZbC/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlgdD1n8xpP89wKp-1mN8pigNyUiH_ff8SchqJWHRbdvEud9OTNA8p-Xuznjv11IbA-bzRn28v-82MLkdNFcJfQHUgYFLzOMSFR0m-cAjKLUbxy6EcDTU1YxK4s9-FgJzRjTdlz47ElFsn/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxCcDcfeZ5ixBR_a4REZxVGc-Adg3sRacyA8tNFMt7dQ9ED6Lb0CI16pfZvhjkBGOTjjRjF6m9CXMbSoO-j50Plqwpkxr_jclMDBat3dJ7dqf9nw88gV6Jnti_lK_9LdJT6l3pChkmWQO/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcz3sZU9M1L5awY4Ihm55xCj09-_IObMVbjrrt5FGJaNSZQNPwyiMhyphenhyphenZazhdXxjww5oRG4E_IzMbKtQ-hZ5PKw3tZvQlRCNaxNz6XYqZLFeltMoD-ICgk4Cb_ErOfOUlARustyYkolJmZy/s1600/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6nhzXjCj6Wac0e0iHcIhKRU4YIo86XD1YH0XklILwt053JfTUFJlpZfoEZDKKwQ8vxZaQPv7vClnM9rQ3YThzWapWUxMQThlfo4RpsV0BUCmVMaf7oPRc2rfQ4pG1VNVoR_fuWL3ooIu5/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"> </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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKA4AscYv8T3qgR6Dw1k46zxG7tQprpKMiVZNY1yK2Qb1lLALClrGOF3C3yUYrBFrX_KbavbDD-TJCj_3yJzTvH2exhyphenhyphenSKxHlGyNQWxTTapXCynUYxBBwVvah3SEhEihooUyRtd0DQE7db/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX5gvIamXH_P3Y9V56g5rG8wJqE3SN1J7xtrPQmcvgCUoIZVakaOfdRk9mrMtZlZ56_evbV7B_g2QlKHb6yOKNucEqwk7gMRf3bmnzpDaChGU-fHMkITY7RySbpzVZxU-xaDm-hA7lfiRn/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}

#nav-container a:hover{

color: #6C3600;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX5gvIamXH_P3Y9V56g5rG8wJqE3SN1J7xtrPQmcvgCUoIZVakaOfdRk9mrMtZlZ56_evbV7B_g2QlKHb6yOKNucEqwk7gMRf3bmnzpDaChGU-fHMkITY7RySbpzVZxU-xaDm-hA7lfiRn/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS7osL9d2VhmcZR2G7tRR7Gww2dnpDL9OWSg3CcnO2PF3R_LEIz0FIQgV3zQbObHo95a9N3NbErh0AlNfxWbI9qQ1tSKon5TnHJSqmnR9pV_d1BubEVMI0VNpBIUTw4g9pjZkngxtlfOM3/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2AccIWVb6aJzc1KdeNIrUSpTpD-EFEckDWx8FT5S20v4GXpoGW8e_Ya6l3wy6xIbVk_-fY-8q_ogz6xB3H2TiNjZspDs3fN8LB81RhQKquLqDnpMgDKwbThOt2npJAFZ2ga9YhB3Xbx59/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2AccIWVb6aJzc1KdeNIrUSpTpD-EFEckDWx8FT5S20v4GXpoGW8e_Ya6l3wy6xIbVk_-fY-8q_ogz6xB3H2TiNjZspDs3fN8LB81RhQKquLqDnpMgDKwbThOt2npJAFZ2ga9YhB3Xbx59/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFlivhE5hQHkxCXltS3QTeuMSTYolIuV26WOafFwRtHzaLbjyTby6R3jHetXGcsvAZeeuI_2X4PYRlWdeJmiNmnYGhi99uz7l96UUY_iYzin0iYmSDD0ZRmBeIcZ9i9l0J25Y2oGqdBLYo/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> </p>

<p> </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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YW9ZIm1r-kM_lAxVFZWglbs94tbO3569vBKjDCyXv40pmB6agw5m5AYOTt28yOEojJ9xKW-S1S7SaQ6byQ1SObyXOfZlSGnvZud8aVaJR9Hv1r4Xl8ku93GOaRKR_4G9Aq0m71szRM/s1600/nav_bg.png) repeat-x;

float: left;

}

.nev-wrapper {

clear: both;

float: left;

}

.nav-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGa31eD6tdHF0U-4pUP0aPjS8Dktc4Uos1eVxOIys0aPXzFOf6Ec6YiCXJc-qsRCbZx8CnOuZZAJZagWCObTuM_Fd1cffXFAjPgn2pYNqpuZ9p_OaUr1-1yhO87UHPX6K-X3rwzZt8FEaE/s1600/nav_left.png) no-repeat top left;

float: left;

width: 11px;

height: 41px;

}

.nav-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmDOOH0IBGoIiTyCpepXCprkFf77YhttMUQIl3vcPRSdxxvVO7rQuS9iqDhglu_JVnCze1E0GlmHUzOm84egU1YHpOoiEjWF39J_yXhDC2zJB1k9Zuyou_dQ59ZyLgUOyrRAbdERUQSytX/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4WYm_ZinOYqph8sjQBKjoFEAsl07iI3HADLYdx8IyA17tqLlBJTdMBgsriseig1t8qlca9x61tDyZNxI2jZFhzrojPelePNU9a2Vxcq1l1oJidiFcZXmrqJPn_XDGW8enf84riPBGURE9/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTLZBVh124H3GtxIIVO6buMjCXbGYWggxxdDOqeps64nRrdHp09AchHo9UB3l1ClmbipRDfRnzCeah17uNmL_SBerydtWg5R2Nb92XR7U_XNfBONFTGprg0Ib3B4jpI9NBsmFwxOqFTrvE/s1600/menu_left.gif) no-repeat left top;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-mid {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdgBepa-P5wo2_CMSPuc0rxHkFhi_pCeP_erBWk7g2wYcofUMD3hAL-DjA4s3jhu43qOXnPkjGVDkr14ZYglFY3PMFn8vWBfo6Akbv-Kt-c8IKnQY_0Od0CFnc8oVUToctds5n3SFlnRin/s1600/menu_mid.gif) repeat-x top left;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk5Ds1x2FmmC4vO72Aswo0rTEv6WthyphenhyphenTC0Ul4qxEfysgiacpHlFM-J9EFVsZQ3FrmhWpNU8oKkDRSzh-o5mno0w-Zepc8cxHlnKo6CLr9WdlKW6l2mWBkLgVDX4CVKs4mOZABmsxqVXU1m/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixseUNtWoZNdD-xlosNlWve04PFK7U1HjcHPrCxelyVeKWfW09Cy7gMzkt2phBNwdumvHw5NlvbCclQa5fT2WkYA9vprPwKpMIbLKw2D2WojBtBA1L4gPYKoMTQYRqFJj-wBRUeS4blLPE/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZONJYKlGLWREwemBpHcu2ntoQJVI07y_KuCdUik_rBBp9PUMcew9qhQoLarUlPmu4tJWyYNJhZQJ2azb4bY0xtiDjlldVxHMcE8FAQj9kZk7R_i9nAq1QV6y0umVLSaDK7Cgh3_L3g3th/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbsoU6IPLPhxxhPtMnZg3ipDTB-sJCoL0VripifAPtoO_KZmsj_EDwiwX0qQDjqpe5xr4qcB9TRWap5fA_qKSJ0iMOtQLjMjPmKZNog8TIgZWMrAXF50OMLMwYPC6OarEnxCiTvtoQ6_a3/s1600/submenu_bottom.png) no-repeat;

width: 205px;

height: 9px;

overflow: hidden;

clear: both;

}

.content {

width: 670px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ3IUvq3x0IjMGnuMvtXUQRoJ_ZXcx4uB-5pUxGT6JXrjx252i5V7oHjYZG9UVK0RqZ_G-SOt9I8ERv7khMegsL0k-GKDq-VQspIM1b_ZrkBQz02LKzjo8CC-4eEuLJAQearb1fIgnV7Qc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuogT0EiHSJ3dbgaMrfPUZY66e6Cyhl6auyhe2DpKpkHGU72tuiNHG3I6Wc3C47d9QFFY6f_I2-f5bLxU4vpNJG1YVXim1zspRoQX-aCZjh9zxFyZlneW1wk-SxF4ehUmeLG-JXa_-m4Sw/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjN_Qjybk_EigaE652wXE-kCNK_3_d3wdm-ma2Ekgvd1eCnpwBfuCu38FTkiX_EehudbBw95lpu4trcEbNVuvIXzLlkJwcC2DT1EkE3Mvv_J5zOrRhwiLmUZE2mMu8jGUD6Rf-PaMAvMgY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjN_Qjybk_EigaE652wXE-kCNK_3_d3wdm-ma2Ekgvd1eCnpwBfuCu38FTkiX_EehudbBw95lpu4trcEbNVuvIXzLlkJwcC2DT1EkE3Mvv_J5zOrRhwiLmUZE2mMu8jGUD6Rf-PaMAvMgY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOk_s64sGrOAxEij4jjrYO5onwXcFK5jkZugXk0Cr_msT_zZMmflSn7ZyTL4n-9wsTCnINwo-QQCBhSmfVhlBaOH-J_3RU9FOc1YvAiUm6iZ3TjXM2psutJaE6dXH8w0FQBN60rOEIJ0K/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOk_s64sGrOAxEij4jjrYO5onwXcFK5jkZugXk0Cr_msT_zZMmflSn7ZyTL4n-9wsTCnINwo-QQCBhSmfVhlBaOH-J_3RU9FOc1YvAiUm6iZ3TjXM2psutJaE6dXH8w0FQBN60rOEIJ0K/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijvSr3_6ocCYHYITX9Rpyz1MDCAfgoXZmG44l_CkM5fr9FJD4O7y20hHFNoXYMiZ3q3HpUtta-iVR-QkoSrUD-rBl1WZpWE9yRFHE6gvjxk6ZHqpPczfWFIRA4mkELDUVNwVbBxwQ5UNgC/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFmi0KFqZ8p6TxFtPa_xBz6rwt-m7GFz79x0_LPrl6BCdx_9T7t5xuZdZ9SkkZyx4ql-xgyAIflFPr_Qy-wrbx7CKvP5gpyDhocJalElAdgnl9JcrSnSS_MNMjCGRt6EF5Z0X7rKQvYqM1/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix2D7_vPwItudAqiw60vNlTu8oOywPmG2ZKyZZxJ5-UM4VL5BAflI7mLUrrgeO0M-IC7X0vJphSnTY_CK-op-BF5Rx6vhsBqQMkZiwC6XNQMtOvayUbPLotTfR0wZLZBtcHCrkYc5yVY1U/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYuNsMCEev7GorTYC9aBWilnbwFSQmhehroJJkQQU1jbLfu0FOi63Cd7dgrrZD_dUIfY37sjVEn119n-Q9wJY6kMLOb3Oxgll0FSpYcMOzMABuuidqU96tAEM_ITyBUH0pAfRxrG8rpG_/s1600/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYuNsMCEev7GorTYC9aBWilnbwFSQmhehroJJkQQU1jbLfu0FOi63Cd7dgrrZD_dUIfY37sjVEn119n-Q9wJY6kMLOb3Oxgll0FSpYcMOzMABuuidqU96tAEM_ITyBUH0pAfRxrG8rpG_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDtlIb3o0ZrEqq2hEEFMiALwmb0nPb0VDCqctWvaV7jnl7WSM6z_XEIKSkqCAoiiGQ_rd6rokNucpHBlwfuclfpI9dz6yfgxCBTleecezin0__QqXbz_h-IHvXVVeh-rFttZWOpiJWAN0W/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgsBjDovQ9EHhbTbTyXzlDscPCU2OWS3sw3Uy3CC40MmErBsglglfP6PXDMM6gpp7nPsfIwmyKzaADiEZG3egKS3ze0gwO5vMGRNzoReVukznvlPr1CR6NA6XGVXCPqecpORY7CakrF7g/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#95d2ee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJgsBjDovQ9EHhbTbTyXzlDscPCU2OWS3sw3Uy3CC40MmErBsglglfP6PXDMM6gpp7nPsfIwmyKzaADiEZG3egKS3ze0gwO5vMGRNzoReVukznvlPr1CR6NA6XGVXCPqecpORY7CakrF7g/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:

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhoP-KmgnA6cD_AdsqI0Tvf-hfYIi4RjFaFHirfOYTI7tysuq5H6N3yKmhg6Fq2iT0RTT259YMIewfj7BHDLdLY0_XYp8Ibbc7XimFJg0aw4jKCcTlpI79E8c4AaQ8U44BcmHZoAd6Zi8Z/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbQ-OPXpsSEgedJh3rl__BnRk6WlQkYoDUibsjz8-OZH7iFXbwerOHVH-0lPUDTfeQQKpdsi6YRea2LevqJXPMIPkEa1HMS3NPbBbyumloaVRPHGQw6mwdax6PmSQwpASupntj1TDTnlBc/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh083IWDst8Gzz3jARkFpK4-sycgnuBZcAs4h3w0AZrQVWBulYtkEd4GwfHPfOahdD9qo8qn6O2_Z6XEgFTpwAFeqK1Q5ITdCFRbzYpjPheVOQDOZi_lGy_Y5NTKpSDf_By4kkbjROXt_Ew/s1600/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh083IWDst8Gzz3jARkFpK4-sycgnuBZcAs4h3w0AZrQVWBulYtkEd4GwfHPfOahdD9qo8qn6O2_Z6XEgFTpwAFeqK1Q5ITdCFRbzYpjPheVOQDOZi_lGy_Y5NTKpSDf_By4kkbjROXt_Ew/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqJiv86MbIHebqeLXnLhGh5XYnE1oklaUo-T1NKh_hwuGOSp4XY37Iyw5F9p5fKphXotxS3Uc4SfOwbK_hGLuZh533FYtB-e5G6N8PnJtX-w8f5h1ZnJMl0s50zQVruYfgcO-y3EHVgh6K/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwU6awr0RmWtSa4ApfNedffOFK09yB49hLAqgZTD3RXkdVjqxrrJFq6_WJTp0tke4Li717qoBIyvYwMZlHAaWWE0KLCSCXm84CHK5f8uZLM410I5LKzPwxjtc2OUh7fOo80TeOAf8s_gua/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwU6awr0RmWtSa4ApfNedffOFK09yB49hLAqgZTD3RXkdVjqxrrJFq6_WJTp0tke4Li717qoBIyvYwMZlHAaWWE0KLCSCXm84CHK5f8uZLM410I5LKzPwxjtc2OUh7fOo80TeOAf8s_gua/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:

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhClK5-JcSjxaeFMCrJgMaknz8bh8e6J0ghyphenhyphendrtFwbag9MjAB1z9I2xTZUljqJROaQoUGOVc3ZIbgl5MNTkMEtRClCae-cxiUDpBejjZFtng4nBG1yQMXHzSiDZ7IV0EVsqWO2xcWKvxa8E/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvsPZWF-wALw-ADw1PcATIDFwqy3PStEVnFkY9ZZ7pj8yGW-0Ld07ma_tYnLLtrkKDnXqYbmvkhEPjT5-hJGQAjbF4UGMdhB17a5v51JbQpWtHgm4JluzHT7oirk0l8n5Sd0G6VAtdx2mv/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJHK0a4_KSOCwWKb7lLXSaisd6Cd2k22qC86RVUFKXvLW84-5GpGwM3hC6dL9Pb5_FV4anhzqstMCealZBnpJykuun_oMi5V-DsX9A6uNpku6NdIVBHYd_tpYvsRD32Z2J2KQnAlbyQn5/s1600/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJHK0a4_KSOCwWKb7lLXSaisd6Cd2k22qC86RVUFKXvLW84-5GpGwM3hC6dL9Pb5_FV4anhzqstMCealZBnpJykuun_oMi5V-DsX9A6uNpku6NdIVBHYd_tpYvsRD32Z2J2KQnAlbyQn5/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzVademeZZphIaBmCfo3MAMkvgh2j4NXgjZ2afN4Fbw0U_2ISthV3BkOAKYH5amcmJ-xYkxPZGqOYHgOpm-XY6g1rJv5412KvXkaRh1eBddgICFdAbkPZQFAPVYDBL_sOg15a7SdXN8jK8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNjiOduqqfwPmtEIq5i7WiL4vjk46CcyC7qjvc7uGkZbxBi9rjHrBE7XM1MScN8_YOOPlEv13rS3TWMFJuzQRKI6khL4N-L2Fi6MDKlnwNbHfm0W7pZ7paGJFmsnh15KefFT-tY6tl7wRk/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#999999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNjiOduqqfwPmtEIq5i7WiL4vjk46CcyC7qjvc7uGkZbxBi9rjHrBE7XM1MScN8_YOOPlEv13rS3TWMFJuzQRKI6khL4N-L2Fi6MDKlnwNbHfm0W7pZ7paGJFmsnh15KefFT-tY6tl7wRk/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:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgQffWrNgtZbfLLZYebvRqVmcGXFkCy0GFzARAErvmo5y9zvsdfhYeqHXlL_lfM0Ua073oCzQG83EwZPU9gTP-XcZpCG2lY3IWgOzfQmNkwwvaG3fgFFLEvB1Hi9pXOqkP5e7wQBL1DnO/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkzTYV2F-jN0Z0T2mX_Ro2X4E-HGsx02GV5xJFuSa-7BuPZZi0kDN_iHabJBzIlkPqznyWvRP06Z89dLn17AVDJZPfRaxjmXfSurIDwFxWXeVLFW1ufb8JbQtthBMTFESDIVHXIwOg5TZ/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

9. Yellow Tabbed Drop Down Menu

HTML CODE:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPdLKQibO3OA3sXwxanonHkJovCOoAKPOlZYLHor0AdQQ9jSrCjpsWJ3ChAyV-uohEcqwD4I-2RDSPhxrXBTFsnnaNKesYiowtDX9LioDlOEx4v1xJEW7ICQ1kjGBeCxgQnAcyfAxPbEP/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh77odFNvjZNQD7sCfrYfGA7n8GL1_62ttFPdvt8dbq9kEyz8LV3SRgE5X553c4zagqfVZSXJ_z61OGVPskfqlukpB3bwpkZIEY8uf7Oqw6HHlnYHZhrDrPz1wD9SaKtByoPWITnLfN_6gT/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

10. Tabbed Grey Drop Down

HTML CODE:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht49CS9e_0ANCsb4bChF8Nrq3nh_1sgFgbb-Tj26Nw9P5mKknXIG38qqHi28ChpXqSsCqhUI4Kxhq6qjgIVo84bawIYsU2uft8gWXXmNGEFjOmiYNmN2eGSLgYoSZ_prIqBN0IwA_gdyOl/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EBLOuabWJB2Rh-78MEt-aWYHmOi4yFOvcd8ijASp-HjV0oUVoivFF12_poKSjQ5uKb0ghXxadiAlCGErqmuNpKq1FPQIS3Z9ckAINYD5g-YgiBvOBqQ7B0UYf-oVHkHIodSQmzUK1zZd/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

11. Red Tabbed Drop Down

HTML CODE:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqA9akkniOSc2QHEnV5zzGg03oDh3VxBZSKLjUfPrzAXxLvEYyjHU40TOM93PfH-K0m5KzU28aUpxnifwvB6M3Li0jBywUjpF0iR1ko1ehgwm5Sw-eCd371EjuftLUcrNiNkRGknkgVesi/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiggX8PzMfjiR5_kvi-SsHc3gD7N4aCLvtT3lrO6RhxDh5BDEIe3U6aYQseaMqovapEdoKlLl6zIMM5gd0JrJSfouNOi-2HIwN4e-iaJt86l4DxGpIDNE3NMMSDlgIzUlV57pv84XcnNFcQ/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

12. Black Tabbed Drop Down

HTML CODE:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgweTiY2ObwYbFxu4-7tArmtw4HKIw4LeqiS3p278QS2Vg1QHP92tsIXa5V86-cgmDiHLyX-39u27CbZ0s0bJqRpUFLrUelkQqDu2mTn9eBBqgPNAKVVej8dCD4T0gomCSg1mJO3FUZkW7Z/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPfA5bVH2l5UNQRofnF0GNKm9k9vYavkPpzC0NCfJ-WWvyRcc1edOsAZj5m0vOboQmSrZ-TGREC2BnvjW8wyxe7f8cJhDp2Vra-OMPQ_KbNm8-2DHdGflklx5Rn5dxQHCmOU_ViM0k5kT8/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

13. Orange Tabbed Drop Down

HTML CODE:

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezZn_4haU9DAARXjrUjkp5iiX7Byz87tUz345-ySZxKScWkEsarHxhUo5gClI90qWM4ZJHXM0QZ0VyBT54w0NpXAF-OgcVCxMJB3dvIB_TqVlOJob-wwqZsXFjGYi3Ld-voSrTyAKofeq/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis3zpSgsYL7t0FZfCcGzfZ3HSv7yHsKWTFTVB9bO_okxWggWL9XpE8HwDfCkRPptjWJuVqgBc31Wz2_o85shaj03cbG7gvs1SGC4Xx_pBOsYkmhxZOuPnBLNAKcZkJFLOmLL977v3E8bap/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>»</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>»</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>»</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:

CSS CODE:

16. Simple Blue Drop Down Menus

HTML CODE:

CSS CODE:

17. Simple Green Drop Down Menus

HTML CODE:

CSS CODE:

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:

- 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYQWO2AgL-IfGZ_mqTAs43MEjAEnkdRgDMRngxFJZAdwEcRq9CKxMRIqIBkvMd8XWoEHcpQ2cb95d-NY4hf_fyViAp-2Ugh4Bee3hNc79sfHyNyxBBcVVYyL4IspWp0kvZmLltTrmn7Sf/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGeXueWZ7BpNBJsCQTheQwnt0Nv_mH8Hj1LdQyf_M7tZ2uRu4h0mVSRu0wCr33RKHfzv4R-LkQHdOjVHb5skTyVcmHzRm1wTNWBgvRvkIwO66G_PvlRdswOLJhqDJueAlf6s7ID_2_ZbC/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlgdD1n8xpP89wKp-1mN8pigNyUiH_ff8SchqJWHRbdvEud9OTNA8p-Xuznjv11IbA-bzRn28v-82MLkdNFcJfQHUgYFLzOMSFR0m-cAjKLUbxy6EcDTU1YxK4s9-FgJzRjTdlz47ElFsn/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxCcDcfeZ5ixBR_a4REZxVGc-Adg3sRacyA8tNFMt7dQ9ED6Lb0CI16pfZvhjkBGOTjjRjF6m9CXMbSoO-j50Plqwpkxr_jclMDBat3dJ7dqf9nw88gV6Jnti_lK_9LdJT6l3pChkmWQO/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 >>

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

168 Responses So Far:

bt4u 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; January 16, 2011 at 4:57 AM
Unknown 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; January 31, 2011 at 4:17 AM
Unknown 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; January 31, 2011 at 4:19 AM
Halim Pranata said...: cool bro..... thx before.... please follow me.....; February 11, 2011 at 6:40 AM
Crystal 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; March 20, 2011 at 8:17 AM
أحمد صبرى 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/; April 1, 2011 at 9:02 AM
أحمد صبرى said...: very nice bro but could i reduce the width of the tab and plz tell me how to do this ?
thx man; April 4, 2011 at 12:38 AM
أحمد صبرى said...: thx man , but i want to reduce the width of the widget so tell me how i do this plz .... thx again; April 4, 2011 at 5:51 AM
website designer uk said...: Thanks a lot for sharing this nice post!You’ve done really excellent job!; April 12, 2011 at 5:55 AM
Vegabond "Yayawar" said...: thnks Dudue:); April 15, 2011 at 4:19 AM
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; April 15, 2011 at 5:46 AM
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.; April 18, 2011 at 12:17 AM
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; May 10, 2011 at 2:57 AM
Stan said...: What to do if those drop down menus don't show?? i tried to change z-index, but no luck..; May 23, 2011 at 10:30 AM
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?; May 26, 2011 at 1:48 AM
Hunny Kitty said...: @GSMC GYMKHANA

i have the same problem too....
my blog : http://dia-honey.blogspot.com; June 20, 2011 at 9:03 PM
friendfinder said...: thank you for the post..
thanks a lot for sharing this.
web designer india; June 23, 2011 at 7:21 AM
Unknown said...: It's awesome ,but having trouble with changing background colours... can i get a help... any way thanks..; July 4, 2011 at 11:11 PM
Unknown said...: How Can I add these to my website... ?; July 5, 2011 at 12:09 AM
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!; July 10, 2011 at 1:00 PM
Hassan said...: I fixed the problem myself! Have a look at http://www.rocker453.blogspot.com/; July 10, 2011 at 2:29 PM
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.; August 3, 2011 at 11:38 AM
ItsMe said...: Here I have blog provide menu script too

http://designedmenus.blogspot.com/; August 28, 2011 at 4:16 PM
shaik shanwaz said...: wonderful information dude..thanks; September 13, 2011 at 11:13 PM
jual obat herbal said...: saya tidak mengerti...
makasih; September 15, 2011 at 12:47 AM
waqas baig said...: thnx dear, i have add menu in my blogCode-Solutions and its working fine for me. thnx; September 23, 2011 at 9:52 AM
Unknown 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?; September 30, 2011 at 7:09 PM
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.; October 14, 2011 at 2:02 AM
Imran Alam said...: Wonderfull And Very Helpfull Thanks And Congratulation for this nice blog; October 14, 2011 at 3:28 PM
movies download for free said...: download movies songs games for fre
http://mediafirehollywoodmovies.blogspot.com/; October 19, 2011 at 1:08 PM
Dzulkiffly Abdullah Munir said...: THANKS BRO...MY BLOG LOOKS GREAT!!; November 3, 2011 at 8:25 AM
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; November 3, 2011 at 11:08 AM
EH 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; November 4, 2011 at 7:36 AM
Nino said...: Thanks a lot Buddy...; November 15, 2011 at 1:39 AM
APTEACHERS said...: Menu is Good But it works in Firefox not working in Explorer How to make it works in Explorer also ////; November 19, 2011 at 7:53 AM
Lucky Luke 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/; November 26, 2011 at 5:06 AM
Sopiyan Sopiyan said...: I find this post very very useful. It's great.Thank for sharing.; December 10, 2011 at 12:23 AM
Quyền said...: thaks post ful
pls visit me:http://thephotobest.blogspot.com/; December 10, 2011 at 10:52 PM
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?; December 13, 2011 at 2:18 AM
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; December 13, 2011 at 2:32 AM
blogger tools said...: great .. make blogger lok nice .. thanks; December 14, 2011 at 2:58 PM
alrick said...: great its good
http://www.drupalnetworks.com/; December 16, 2011 at 9:28 PM
Fikrul said...: hei, come to my blog, dalamrenunganku.blogspot.com; December 22, 2011 at 7:50 PM
Unknown 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?; January 5, 2012 at 11:25 AM
Kate said...: It's alway vertical. What am I doing wrong?; January 7, 2012 at 1:57 PM
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.....; January 10, 2012 at 12:10 AM
Mas Mur said...: Thanks for your information...this is nice blog's..; January 10, 2012 at 6:10 PM
Sharear Azam said...: love it; January 18, 2012 at 6:41 PM
kailash said...: Thanks for posting, this is awesome!; January 23, 2012 at 5:21 PM
Elinor Bygg said...: Why wont the drop down work?
Can someone plz explain to me how to make it work?!; February 1, 2012 at 3:40 AM
Web Development Scottsdale said...: I loved the drop down menu effect.
Thanx.; February 5, 2012 at 10:04 AM
imam said...: gan cara bikin postingan biar bisa di tari itu gimana,..?; February 9, 2012 at 4:36 AM
Software Akuntansi Laporan Keuangan Terbaik said...: thank lagi cari menu nav ne , ...; February 12, 2012 at 8:15 AM
Stavrosblogger said...: thanks man i use the 12 one and it's amazing; February 17, 2012 at 7:18 AM
Anonymous said...: I am going to use number 7 on my site. Thanks for the effort.; February 18, 2012 at 8:02 AM
Saimoom (Shine Mark) said...: Ever green post. Nice. This menus are very cute. Keep it up.

http://adf.ly/msMG
http://shinemark.blogspot.com; February 18, 2012 at 11:59 PM
Anand@Techlove said...: helpful post... Thanks lot for these wonderful menus codings; February 22, 2012 at 7:42 AM
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; February 22, 2012 at 10:14 AM
sarannu said...: thank yu for posting; February 25, 2012 at 10:33 AM
Anulaa89 said...: Everything would be okay if I did not spoil the top of the template :(; February 28, 2012 at 1:29 PM
prasanth said...: thanks for the good article man........ really awesome post. www.cyberfinger.blogspot.in; March 1, 2012 at 10:28 PM
buatblogKangroes said...: nice article, my blogg need it, pembuatan blog become easy.; March 3, 2012 at 3:25 PM
BuatblogKangroesTea said...: Tutorial pembuatan dropdown blogspotnya lengkap banget ya..
thanks for share. sukses selalu; March 4, 2012 at 3:04 AM
aden said...: coba dulu ah; March 9, 2012 at 9:06 AM
Ceu Thawng Lian said...: I like that this website!!!!!!!; March 10, 2012 at 9:40 PM
Adi said...: Nice info. Very good for my blog.
Thanks; March 11, 2012 at 4:59 AM
Partha said...: good idea
copy paste work not yet done; March 13, 2012 at 10:24 PM
Unknown said...: Thanks for this awesome widget; March 20, 2012 at 5:05 AM
Unknown said...: Aku Mau Coba Dulu Ahhh,,,,

Oh ya gan berkunujung balik ya di my Blog

ARFHA MP3™ | Mp3 World Music Downloads
Thank You; March 21, 2012 at 11:23 PM
Blogger said...: Hi the back ground color is not changing, Please help.; March 22, 2012 at 10:01 AM
Lycanbd said...: Ok...i will try that on my blog...
Thanks; March 22, 2012 at 3:36 PM
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; March 30, 2012 at 7:11 AM
Anonymous 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; March 30, 2012 at 10:19 AM
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; April 2, 2012 at 10:33 AM
mintjob said...: great aritcal on drop down menu very infromative and varied lots of choices as per the requirement
thank from www.youtubeviralvideos.in; April 2, 2012 at 11:38 PM
Sandy said...: Wow thanks for doing all this and for sharing it. This has been extremely helpful.; April 5, 2012 at 8:50 AM
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; April 16, 2012 at 9:55 AM
Unknown said...: Ga Ngerti Pas Masukin Kode Yang Panjang Pas Di Masukin Malahan Banyak Tulisan Di atas Tolong Bantu,,; April 19, 2012 at 6:58 AM
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.; April 23, 2012 at 12:49 AM
reef_meizer 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..; April 24, 2012 at 10:03 AM
mamang suryadi said...: Thanks ya masbrowwwwwwwwwww; April 29, 2012 at 10:56 PM
HÌNH NỀN ĐIỆN THOẠI said...: thanks for posted

Please, visit my home page: http://lapmagfpt-vnpt.com/; May 9, 2012 at 11:38 PM
website design said...: Great post. I really appreciate your blog. Thanks; May 14, 2012 at 11:26 PM
SuhuPTC said...: it's work. now my blog looks more cool. thank you; May 16, 2012 at 10:24 PM
Aruna buddhika said...: Thank you. i got u. but i found a easy way by my self.
i want to know about black links.; May 19, 2012 at 8:30 AM
Unknown 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?; May 19, 2012 at 10:35 PM
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...?; May 20, 2012 at 9:54 PM
Anonymous said...: nice bro...; May 28, 2012 at 10:12 AM
Gitar Malaya said...: hi...i tried alter the code myself but the drop menu become like this....any suggestion?
http://gitarmalaya.blogspot.com/; May 29, 2012 at 11:14 AM
website-ideas said...: dude..... thank you very much...... Thanks for the awesome menus...... great work man.,.....; June 1, 2012 at 10:03 AM
GeraRd 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; June 4, 2012 at 12:37 PM
Anonymous said...: Appreciate this post. Let me try it out.
Here is my webpage - Wicked Broadway Show; June 9, 2012 at 6:13 PM
Hammad Baig said...: Awesome dropdown menus navigation thanks bdlab; June 14, 2012 at 12:11 AM
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!; June 14, 2012 at 5:43 AM
Unknown said...: the man is taking back links from u guys mind it; June 16, 2012 at 4:21 AM
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; June 25, 2012 at 8:47 AM
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 !; June 28, 2012 at 12:28 AM
psd to html conversion said...: well drop down menu is hard for me. and what is Moksha yadav saying you getting backlink from us????; June 29, 2012 at 6:45 AM
Unknown said...: hi thanks for sharing it........

also check my website....

www.mediafirefree.co.cc; July 3, 2012 at 4:22 AM
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; July 6, 2012 at 2:05 AM
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; July 12, 2012 at 8:53 PM
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; July 14, 2012 at 7:00 PM
search engine optimization said...: thank you very much for sharing this information i really need it..; July 15, 2012 at 4:20 AM
Agen Bola said...: Mantap artikelnya, thanks for share.; July 25, 2012 at 11:56 AM
pcvision said...: Woesome post Supper.... I also made a site pls go and seeeee pls... http://www.pc24help.blogspot.com; July 28, 2012 at 6:29 AM
Unknown said...: Ini baru mantep tutorialnya..lengkap abisz !!!; July 31, 2012 at 12:06 PM
Dexter said...: I Really Liked Blue Tabbed Drop Down . Thanks Alot for this; August 6, 2012 at 8:49 AM
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; August 11, 2012 at 2:36 PM
free google search engine optimization said...: Nice explanation with great screenshots,,,,,very nice tutorials.; August 22, 2012 at 8:23 PM
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; August 29, 2012 at 10:31 PM
Anonymous said...: Thank you for writing this information within your website.
My web blog ... Digital Printing Melbourne; August 31, 2012 at 4:57 PM
renu said...: Hi one and All.... just check out my blog for you kind info and to clarify you doubts...

http://livewickets.blogspot.in; September 2, 2012 at 2:57 PM
mothered said...: Simply great.

Thank you.; September 5, 2012 at 5:05 AM
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; September 15, 2012 at 2:40 PM
Unknown 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; September 16, 2012 at 3:56 AM
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.; September 18, 2012 at 5:39 AM
amisy said...: Screw Oil Press
http://www.oil-press-machine.com/product/oil_press/screw_oil_press.html
:) Thanks for share.; September 20, 2012 at 6:48 PM
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.; September 24, 2012 at 2:47 AM
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; September 25, 2012 at 11:59 AM
Unknown 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; September 25, 2012 at 7:16 PM
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.; September 27, 2012 at 6:49 AM
Mitul said...: Blue Tabbed Drop Down is really awesome drop down menu . Really thanks alot .. i going to use it right now :); October 5, 2012 at 5:31 AM
Web Design said...: Amazing drop down menu widget....!!

Thanks for Sharing; October 8, 2012 at 5:02 AM
Unknown said...: i have a problem wit my drop down menu , it cannot expand so same contents are hidden .what should i do?; October 12, 2012 at 4:15 AM
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; October 13, 2012 at 10:37 AM
OST Co., Ltd. said...: Nice blog posts and articles.; October 27, 2012 at 11:21 AM
Kaki Gajah said...: nice post,,thank you for sharing the article; November 9, 2012 at 10:10 PM
Unknown 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; November 13, 2012 at 3:08 AM
Anonymous said...: I thank you for sharing.; November 21, 2012 at 4:52 AM
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; November 21, 2012 at 10:22 PM
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; November 27, 2012 at 4:47 PM
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; November 27, 2012 at 5:29 PM
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; November 28, 2012 at 4:32 PM
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; December 20, 2012 at 6:46 PM
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; December 21, 2012 at 4:27 PM
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; December 21, 2012 at 10:58 PM
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; January 9, 2013 at 2:42 AM
Anonymous said...: Nice styles , I have added #12 in my blog ,

http://www.onlinecorners.com; January 15, 2013 at 4:08 AM
Bank Mandiri Bank terbaik di Indonesia said...: Keren.....Makasih Ya sob
╔══════════════════════════════════╗
║╔════════════════════════════════╗║
║║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░░▄▄░░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░█░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░█░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░█░░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░█░░░░█░░░░░░░░░░░░║║
║║░░░░░███████▄▄█░░░░░██████▄░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░███░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░███░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█████░░░░░░░░██░░░░░░║║
║║░░░░░█████▀░░░░▀▀████████░░░░░░░║║
║║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║║
║╚════════════════════════════════╝║
╚══════════════════════════════════╝

Qnando; January 21, 2013 at 7:16 PM
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; January 26, 2013 at 8:15 PM
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; February 2, 2013 at 12:45 AM
Unknown said...: Thank you so much for this collection bro.
Bloggerjin; February 16, 2013 at 7:28 AM
Unknown said...: Awesome widget! Keep it up.
Bloggers are expecting this types of widget.. Thanks! :); February 18, 2013 at 1:13 PM
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.; February 20, 2013 at 12:12 AM
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; February 25, 2013 at 5:19 AM
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; March 29, 2013 at 9:21 PM
Unknown said...: Thanks for sharing this information.

Web Design Company In India; April 11, 2013 at 3:44 AM
Anonymous said...: Thanks for your post i have implement it in my blog; April 25, 2013 at 11:53 PM
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.; April 30, 2013 at 11:48 PM
Detonator said...: thank you

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

طريقة عمل البيتزا; May 3, 2013 at 7:37 AM
chat said...: Awesome widget! Keep it up.
Bloggers are expecting this types of widget.. Thanks! -:); May 7, 2013 at 2:23 PM
Nithin said...: thanks dude nice work

second one is awesome its make my blog better look

take a look at my blog exefreeware; May 14, 2013 at 6:25 AM
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; May 18, 2013 at 1:43 PM
Dikhabadi said...: thanks for share,; May 19, 2013 at 8:53 AM
Vivoderm said...: thanks; June 19, 2013 at 9:27 PM
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/; July 17, 2013 at 7:12 AM
Web Design Company India said...: Nice Post..Thanks for Sharing.; July 22, 2013 at 9:14 PM
Web Design India said...: Added to my job and it worked fine. Great widget. Please share if you have similar.; July 27, 2013 at 9:41 AM
Aleks Kos said...: THANKS BRO...MY BLOG LOOKS GREAT!! http://przepisy-po-angielsku-sortedfood.blogspot.com; August 4, 2013 at 9:18 AM
Dudi Yana said...: yeah; August 17, 2013 at 7:08 AM
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.; September 10, 2013 at 11:38 AM
Adorn Web design Company India said...: useful stuff ,. Thanks for sharing this post..; September 23, 2013 at 11:42 PM
Unknown 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.; September 25, 2013 at 7:50 AM
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; October 5, 2013 at 8:53 PM
xaverius said...: successfully! thank you very much for the tutorial; October 29, 2013 at 7:56 PM
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.; November 11, 2013 at 8:27 AM
Agus said...: nice article..... very good....i like.......success; May 6, 2014 at 11:05 AM
freetvc said...: Awesome collection of codes and menus.This is a Helpful Post i am Adding This Menu In My Site Thanks Techtunesu; September 21, 2014 at 7:34 AM