cara memberi Drop Down Menu blog

huhh,. akirnya gw post jg nie menu drop down ,.. setelah nyari muter2 di bikin pusing mbah google,... ok lah, langsung aja cekisot,.. eh cekidot hehehe

Catatan: Cukup ikuti langkah-langkah hati-hati, Semua Menu Navigasi bawah ini menggunakan dua potong kode. satu adalah kode HTML yang bertanggung jawab untukposisi menu dan yang kedua adalah kode CSS yang bertanggung jawab untuk tampilan dan nuansa dari menu. Paste kode CSS untuk menu pilihan Anda tepat di atas]]> </ b:skin> dan kode HTML Go To Desain> Elemen Halaman> Klik Tambah Gadget atau Tambah elemen Halaman> Pilih HTML / JavaScript widget> Paste Sederhana HTML Anda kode di dalam HTML / JavaScript widget dan klik Simpan.

 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/AVvXsEinZ8cuPFcY0F7iJnNSdARJMUpwnXMu14yd5AlD0vVh3b2_tNFFuDqE0loOLri9rw-g3IrWRitWmVRfTDQanIEM5Ab1TV_bp6eC-QJaoW8_mjEYTKCs52w1c9xPLc6x2P9wOfJJiIu4OrTP/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/AVvXsEiqWlDLJBdGLF9IyQDrCcNTaBUspgE9Cz94eaquNjfKa9EKIH35XrCJmegOEFeRrvEjyUgzTUsWklDjjPAE7zbricyK-GA0ubaoBM-ZYtIY8ci0X2RYsAKen7LRHM0wS_ltRiIqsM8sXM1U/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/AVvXsEijl_XSxzRtjnV3oPIeZGtXrbuO3uwJyo8EPfBRhjfboeRx2fnIIjlojd9LgnJWZxb7WnRyS7Was5JJNgX89Rej6ycnDvMIO1kOZvVTQ_wSkMjl98jZSD0Ea_DQhJMLH-JP-paiJfbq44MM/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/AVvXsEh8R-SBrSeHSprUDv29DcK-M9wlGggCsn_dAxXz4S02RJ8Cqgt1z3G8dd2qavLglQway8Bc4XiyvllX2udgTiyr0U_ZtRJpqpy3RwMRbjA-vwYCHPJ3du2oqPxFi19Bodq8EjgTC_fUhY3B/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/AVvXsEhvAwy3z8YGVFRcQpoK7OD91cxbW1sxh1iVtcXdtRYsDtRWSXGmOVDpnSmS7NjQTsNESonNCc2yIC0t5Y9wOOKBwLpMPIF-RYesBltPi2wOsmcI2ZSF0-eH9EGDJ8OZFAmey6biyi4eZxZn/s1600/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHEadTJaKgCUHBRgaSn3BziE1LtiUyFJglqckEgaRxfi8_rysmS7Ng23jzi0tcwai0uKL0fe8KJ-G7vGCwaPIHOLdlBrXR68AfkmieOl-40Z1fIX_4-UL__9CwBU_pOwfToVVKBfp7mC5Q/s1600/nav-bg-r.jpg" alt="" class="float-right" />

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

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

</li>



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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</ul></li>



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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

</ul></li>



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

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



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

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

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

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

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

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

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

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

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

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

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

</ul></li>



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

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



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

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

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

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

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

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

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

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

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

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

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

</ul></li>



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

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



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

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

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

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

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

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

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

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

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

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

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

</ul></li>

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

</div>

CSS CODE:

@charset "utf-8";

/* CSS Document */



body{

padding: 25px;

}



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

.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrB34-dXjFv59VjOSEsV4Oo3Bco8sEmq_RDjgniFz_TQbE0Dn7XEnqg_R5_2BbOWTLlsV3WW-KpSM2sfkBe3bRUcFDst-TV6x7mPATxG5bCk5obyGG3hz0nDXHC4fvV84ogn_jliZ56sTM/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/AVvXsEg5t8mwE98SkHaoH_px4aJpXvSU7NNQTHODGsoRNwlKzjT0PX9RkNNNl6gdHZhdbHy9QrnIyKbHB3nGFZlhNIKM8FxXpm1WNomR3TWtZNK1f2CX97nCIp9oriK43Z8JbtkxKcxIT30N9lx0/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/AVvXsEg5t8mwE98SkHaoH_px4aJpXvSU7NNQTHODGsoRNwlKzjT0PX9RkNNNl6gdHZhdbHy9QrnIyKbHB3nGFZlhNIKM8FxXpm1WNomR3TWtZNK1f2CX97nCIp9oriK43Z8JbtkxKcxIT30N9lx0/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/AVvXsEiTv14CS9fmnksU1OtRZo-mR4d4rNjylsWvCm8Qwj8pqjDj_gWwww_H6eiv7pvnBCGnM6cKa1VL469VIP90-q-I6WvObLsbEAmLYgcwq7mrOU2HOfOWvkCWslLl_RipaM_y2lyoWOxlJEPv/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/AVvXsEjiOocjMso5ifh9CYLu71PXNEqxXLfVSUbqIcXrVbGWUuL0Wvcgq6EnnWmc2r3jbFVie3Rz54qo5k29wDCLL4Kgoc_KagKfANhtaqu83JOxO9s9i6XoxeNZoGlAKpjE1SQQ5Ru_7aaPycIQ/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/AVvXsEjiOocjMso5ifh9CYLu71PXNEqxXLfVSUbqIcXrVbGWUuL0Wvcgq6EnnWmc2r3jbFVie3Rz54qo5k29wDCLL4Kgoc_KagKfANhtaqu83JOxO9s9i6XoxeNZoGlAKpjE1SQQ5Ru_7aaPycIQ/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/AVvXsEjZplY6VlorqVILRUlhnk7NiPiP3Qai3vQYihBaml1XTE9ecTSjCoSfh7XVhKLFcWF45-Zic5MrCiRgDsuMKIaOW_-4awzVT0qbRo4OHBTDAXr7WBKqAUbdANnzd6-yFAz_3VbY5K2jadl6/s1600/item-secondary-title-bg.jpg ); */

background-repeat: no-repeat;

font-weight:bold;

}



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

#nav-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}



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

#nav-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}

3. Blue Dawn Drop Down 

HTML CODE: 

<div class="wrapper1">

<div class="wrapper">

<div class="nav-wrapper">

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

<div class="nav">

<ul id="navigation">

<li class="active">

<a href="#">

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

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

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

</a>

</li>

<li class="">

<a href="#">

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

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

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

</a>

<div class="sub">

<ul>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

</ul>

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

</div>

</li>

<li class="">

<a href="#">

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

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

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

</a>

<div class="sub">

<ul>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

</ul>

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

</div>

</li>

<li class="">

<a href="#">

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

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

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

</a>

<div class="sub">

<ul>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

</ul>

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

</div>

</li>

<li class="">

<a href="#">

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

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

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

</a>

<div class="sub">

<ul>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

</ul>

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

</div>

</li>

<li class="">

<a href="#">

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

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

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

</a>

<div class="sub">

<ul>

<li>

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

</li>

</ul>

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

</div>

</li>

<li class="last">

<a href="">

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

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

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

</a>

</li>

</ul>

</div>

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

</div>

<div class="content">

<p>&nbsp;</p>

<p>&nbsp;</p>



</div>

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

</div>

</div>

CSS CODE:

.wrapper1{

color: #44433f;

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

margin: 0;

padding: 4px 0 0;

}

.wrapper1 a{

color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcRrnkchtXoGXsW4jQ5XFtt-_gwfk-dlkC8bh_x4Uk_5ybwlKbRC5j-dAZ8urIQN9c5uoyxD8nGCsM42d12lPwk-cOEWpP-u-nUG3UXxUj_Dxe55VJv-vOtF8vm342nsASCYabNIsLf9pp/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/AVvXsEju6x0JK_WheVEu71YtpNSy59KnanETVrE5kEJ-SbDdY-03JI6lyBeRgx_NcQy-KcuT3XfU9L7UxF3THEgtlGF8PUrIX0xT7makHlgXq0nUXAOrwc_EuNG5myJ6s21zdFOAGw24lvvd8oE-/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/AVvXsEhCqlf7uIxgOdujrE6MCVmaqojmYz_wEBEpr2Q4tEkZ_YAlcPg2tGZ5bxvdOgCwhPYZ88IByFlKUPmZLON3SSqg4WQGZ0hrIJ3V8Bgzq7VIaMig5zQSu8AIkTgS2FA76h1ACPteFyIcK-Jh/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/AVvXsEiKtiHYmf4ayXrrMFOwKIDQzqAOvLmtnlbHVTbw8oc-TGTZHKsOC3-Grr4plcWaScKNdPWiIWmZ-RPlOxPPZhMpB3jS2re-uJjCcKqT9EvJOVh8OUHZgc_ulPKphjIzb2dDLNeZOIS11L3X/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/AVvXsEjy_8EU4Pblv8bNB3P3TMysAqL-76-fXk7Gu-AfI_xY5-A7FtGWloX9H0uQS9iZlaYAZrEHgNM-QxFnLQrmucIBwCvQzcGxnhKBtMY1b13K583xgzHV_j9xvZwJSU03osWhsQlZQk-MlafG/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/AVvXsEhqR2AHoR1DkzEfoGBppfFJbJZpAOk5raZQuN-jSDrVDaI-y4cGY8xVH2lA3OnEC0uACyo2kAFOwFDxG4QqqEKpQn01A5269ukhkEj9hW8XYYHc44jwllJbRPRWhQvs0jsbITXbACmPLupQ/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/AVvXsEh_fsU8IVS4IbWfHTXt2VCC4-fn5nFQt1-mjDnJGrwn689-rn3STVP6KoGlUs0ohxqtuqAnPH7GQeiMqOYTQu3rfKZc94xV6rvs45ooK3KqywT09w46apGOZeFXN-ghK7TencW_Q8QQeyOX/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/AVvXsEgmKBA0A1DlqluDfoPRRJIIsuyDlRNrodaboQ37PqEpNkE7YrB0B9EV2uMKOr8ivbZsesSpuwZ-3NDWAXRvOFZwKy4twVdMHydNBzaoceIrGCB1AXmJWJuYRXgJYu3ZyigcBiUc2DXW5T0G/s1600/submenu_top.png ) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8BdNZSGDXgauMXbEhOFZZ1LDSgsW2QPSFgAA9-fuS8BLIWVlyZh5XxJlMKw7jmkvc9BKYELol51tQapT7hwe4OrkxzRFBbygsahx3BF0cWgIwSH55zvHY8XpliMjgM2wSiaURyK7h5QZg/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/AVvXsEi6-eOJLtxR_6hOQbsTN2etKkOW19UjyWN8F1bFv4AG1FmWVFrxDhtoOPXEFBNM4gk2dCecFDo8_zlxpDksYcbd-iUUfqjRXOAggJkhyphenhyphenWHFoHHTbNTcatKLvZy0nTOMXEVH894tR3Ll142J/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/AVvXsEhqkc4ORja5bBa3KVgD1X_uW72tM0ZM2KdGczpszuf8HR_b4wc09CUQSaTjId84otgaTw5OGPLj7CCZXpZwv9oC7jnOqVAFAt1ZFcuerAhyPmLGlCHYBh9q2uKt0NljR2PJY5BhPdoMUmWp/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/AVvXsEh-XmDs-42yHVGLvqXr9rjGeXwrq3haVChBtUQfMhP_H0Y4_e_KvE9hCJVc0e0wK-6GW4NsOok7gCF9erRrEBQddE8Fw4PcRXaqm7y1Unn5mK1BiLPkbr78bTdlFgSmj0zpXOphfiEAQUDu/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/AVvXsEgX4-El7C1i5Qvl5VBo5Iacr8ufJXE-zsdQ_FRTQv2w5M5WbME7yyQG-_Cg6n12n-hCsoisFZ9SKPTUcpIvDP6yhAhX86LftqF2vpBBsiEG6vgRy1eoXBP2DvrjWspDG62pCqOrtIDpXt67/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/AVvXsEgX4-El7C1i5Qvl5VBo5Iacr8ufJXE-zsdQ_FRTQv2w5M5WbME7yyQG-_Cg6n12n-hCsoisFZ9SKPTUcpIvDP6yhAhX86LftqF2vpBBsiEG6vgRy1eoXBP2DvrjWspDG62pCqOrtIDpXt67/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/AVvXsEhfKOLjl9Y51dv-0_m-ucEkuYQVeTCYHlMZzCDmQeCpmakrw0j8-VSA9BojV6I2OU0dgZZryuPS8hsfPu0cAAZeoyxgnZ_S1Jkh0RJBqx-EtLPSmz-ZsNpRk2Y2dVZE2m_ozhkSD8Sn9CQx/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/AVvXsEhfKOLjl9Y51dv-0_m-ucEkuYQVeTCYHlMZzCDmQeCpmakrw0j8-VSA9BojV6I2OU0dgZZryuPS8hsfPu0cAAZeoyxgnZ_S1Jkh0RJBqx-EtLPSmz-ZsNpRk2Y2dVZE2m_ozhkSD8Sn9CQx/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/AVvXsEilCm67BtFXRkz9fIKSgoK7zXwMtr9sse8SzZS8mTOtmW7RcurXK28g0qaK3oV-12c492FmsdxwYa2ExRnTqKJ1M5kioSb2HZRie7aCd895fMzD5g0LnOkK4EQ-zCJ6yp40onYDPUV8LDwf/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/AVvXsEhXZWovjqR6yVyoaUmo2MdvYou2h90B32EegDvj2bUzdo_VcWiIdCn4PNLmf9RpyRyISGY53Mnl7rGcGI9wYALLh6wkrOFfd_O96xpgrXsSBEj8Fep6IDVZXP2cCuYrRBGOJVVXuj_x8qQT/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/AVvXsEh7IIqkTT0S8PGw_ehKm2HUjqxJQW_8yFuXuiCNoRN89v7sq_uGJJsuwGEFAbPNB8WELqD5HTg4xNmd0LADO1C4PawUv9yTY0w_8TSTdfXwiXpo4WXXwTC9Y0KrDmozxZX1JH2UxB3dfYOm/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/AVvXsEhPs0IH8NgwhRr6uBwgMvLNoVr6dXfB9Pr3NTN5_ZgpZT43RRXddLOld95HFjNhD6nttbFL0poOjomxCVm8tWI-P7gF8D5Q6Oi1MNANfywqpsXAmpm38yIW7TnSkPII2C8pGJKxcEWq9FRD/s1600/down.gif ) no-repeat right top;}

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

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

.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c40712G-1MjO5YtZD6pNTi-x1KJxf2XVjsh3MQizFOeXpqOTczlYEN-qXzqZayDobYfXrbMinvPNT_wbPyJ4_NbmrhfLcVi7C-vu8gOnxX6MJtv5X3tLuJa6szYiAs7NUKVVFJ-13aUU/s1600/button4a.gif ) no-repeat right top;}



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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4c40712G-1MjO5YtZD6pNTi-x1KJxf2XVjsh3MQizFOeXpqOTczlYEN-qXzqZayDobYfXrbMinvPNT_wbPyJ4_NbmrhfLcVi7C-vu8gOnxX6MJtv5X3tLuJa6szYiAs7NUKVVFJ-13aUU/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/AVvXsEj9MZ41MGGNluM-ZKWj38XKwPIOGVP6obUF48yuetzCNsWCHUTWE5ILRFP9yZL5EPpjYlW_CWB1zpLWSr_aDdGokyhZgHBZuaL3uo6URaAQ4cbG1tgM6UFsNHvpDrO9IXx9Yf5rQHo6sZd0/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/AVvXsEgaM01kH9eIWUBJeezWv1g8z5r5SDS3i4k_ZEQZUekFOJ-3UaGJJ0pjVlYpFB8i1U-s86YZ3EEG6-dxowgOEtY_dZHbObXXxGRz4rhweKRybFxgGJRDkyAI7uMRIS1AjMbUMo4SdcMDW8LE/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/AVvXsEgaM01kH9eIWUBJeezWv1g8z5r5SDS3i4k_ZEQZUekFOJ-3UaGJJ0pjVlYpFB8i1U-s86YZ3EEG6-dxowgOEtY_dZHbObXXxGRz4rhweKRybFxgGJRDkyAI7uMRIS1AjMbUMo4SdcMDW8LE/s1600/arrow_over.gif ) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

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

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

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

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

6. Green Impression Drop Down Menu 

HTML CODE: 

<ul class="menu">

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

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

<ul class="sub">

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

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

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

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

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

</ul>

</li>

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

<ul class="sub">

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

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

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

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

</ul>

</li>

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

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

</ul>

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyQYfkmFKYR0Nr7kG2WN48QCpKsc4E5jRweCl1u6qBzazgB_VGeQhE01Qh6k0o1I7dOf0vTqfhRdFUh58dUSOSfAGTW8s8weenmtRY5WNqrA7KDnVZMrLuCxjBAS8ecA0HndUiebs4wFu/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/AVvXsEgG-ThDyMzyizB75NLGlHmERpnBZKvSitnm0w6WBOktNNt8-RotdIZxEiDqNCt7I9p5kQXYWU9vI2fmzROKhmGQpH6rSgZ_obXW9CoXjMBDa9B7Y_hBmJp7SP_TByvaTFAlQZcEMa9qMPcK/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/AVvXsEi5OiBwS6IrQSMqZDvM_aNQ7c1HuZDMUA51f8Yst7f6Zp4UlBmVy1XLZWR6bLTvDVf73-XB1RQVpItlXgQmw9beHV3ad4ZIlS6pNs7LjyxP8h79M7dE9t62j_ih1YIKTw34CsQ-Q1yya7i5/s1600/down.gif ) no-repeat right top;}

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

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

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



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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlstoCz5IwHykoKt6F2AgsrmQT_POo6Vi-T5Gnv2UKejjT4ScJTFk-WrfPdVmpJN7uqL3-qJUxnycmM5CR0gDzShx3OeVlHmIObBRlmIklaMj1jC4Pwv03j63924381-Di8382FOm_cC1O/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/AVvXsEguXUnNJo8FsuDxwf4DH8BEEGhND4r0M5sLLlJs8k3AqERkcNC47znd1LYY4JAMdaacYt2hahr1OJu7Km9yvVpXG4o2iL2TMgwgugqnpCG4UXa-xP70-6MhndroXnDQgnIhjpxbygwG2_Jz/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/AVvXsEihClJXLJs0zxX9t-jL1Ua_8YtJ1kSp8JP23-f1liLlVi79dLSYnhgcC26G9CHT8SWWXODNdYC41bhIyV-byWQR9dUdw6MXvOu2GnSJUqncKjxVL-4wtORs9-Ma-GssgqwnXlEAzEejwDh6/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/AVvXsEihClJXLJs0zxX9t-jL1Ua_8YtJ1kSp8JP23-f1liLlVi79dLSYnhgcC26G9CHT8SWWXODNdYC41bhIyV-byWQR9dUdw6MXvOu2GnSJUqncKjxVL-4wtORs9-Ma-GssgqwnXlEAzEejwDh6/s1600/arrow_over.gif ) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

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

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

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

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

7. Grey Impression Drop Down Menu 

HTML CODE: 

<ul class="menu">

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

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

<ul class="sub">

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

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

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

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

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

</ul>

</li>

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

<ul class="sub">

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

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

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

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

</ul>

</li>

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

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

</ul>

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8gCgiLUrt76vUEFfJnQSbx6G3NYEz1W-SNFL9T9REuK9qUXcmZZd0tjryjUO-E9vhzwZ6pn3akkgtM4xTygmVdk0yr3V7t14JtOxV7vsO3X-pGieyuwYSpppU5ABy53iutTe3H1imlxY9/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/AVvXsEgQnDeWz0V7ggniAcMd1ihR52kHXwa7jVEZeVJ_1LzUbmvW6AdnjaCipe7F0PtRqRyf7cdZMLbwhWJBSjGN4GLySzV52IjgLhEcAdoHA4-doemZIfA9KbnH6KQ2jxqPLrn35m5gDcCCRGJU/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/AVvXsEhgGo7l6x1xkK-MNArbhOx7n7tKn8wEAMJw7zP2Z8pKoEVa3_2coo8plAdXGoh6ccxfPr7YgkmfkyX-6H07Nba5Gs1fMP9wQjE9-ntV8G5hEezOBUbtQ2h6fY1980cwsRb4uXI5b_xECPDE/s1600/down.gif ) no-repeat right top;}

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

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

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



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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiNvkiSZM2IJHXjh2NxbWUqOf16dQ_L6uywwGTKOFbxLemgHYyg_BYpjxoBCsiQg8boO7yKu0hgnW1hMOvZdepvXJjmuO-6CUET2OTNwmYu31PVmWn5iUnPNMFg-PU8BMYOuC38dhiWwN/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/AVvXsEiZtc8f2FjsM3tMq9l6gABMXomLf0ArHnEo2l596vNaFaBu5i_WNoQoXXshoJ7dDo8IZwCfJZQiAw5rrBGKR9aDBRJXKYHdYiReePuYcBZPI1iTI4IY4Lsh9v-wQ5bfUY1-g0BpvXyl9mkD/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/AVvXsEifDH1NMDkUCvYskHG0hl6MHHPLovezNSk5a8SHYJL8k1ht9fPaj6-2Bz0QGOkw9k61mZ6GG0gT0n6I3JODNYcKvC23bXefkbn00W_oVeVL8fZqZE-bJuwVEZa-BT3E0DgBbFfzvQKS90IO/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/AVvXsEifDH1NMDkUCvYskHG0hl6MHHPLovezNSk5a8SHYJL8k1ht9fPaj6-2Bz0QGOkw9k61mZ6GG0gT0n6I3JODNYcKvC23bXefkbn00W_oVeVL8fZqZE-bJuwVEZa-BT3E0DgBbFfzvQKS90IO/s1600/arrow_over.gif ) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

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

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

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

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

8. Blue Tabbed Drop Down 

HTML CODE: 

<div class="menu">

<ul>

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

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiNvMNlOcTEczpAO5djsPToWn6z69DBnm0QZSxRox3j76MQqcNY7LxLfWcsVlI2pw9_z25_neuS1rTsb7ot4Hir9Tq0-rlUkLWAtsApuQ3alfLfss-SMidSZXXrbWFau7C8yeRmwFQiZM9/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/AVvXsEiGvNBSN9YOxYv659c8Sb-3D429XjnIiDAAhiMYaWxvAHIy4mHfAps1L7nZqSvR4kGsWpRvjw4arBWtNgT19s7mKKmVfsTPPESGw9IU-7lBQGRcnzMMjXURbvR9862e6Mts4tRrpSogNTdr/s1600/current-bg.gif ) top left repeat-x;

color:#ffffff;

}

9. Yellow Tabbed Drop Down Menu 

HTML CODE: 

<div class="menu">

<ul>

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

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgy9JcpytX9Xw9S9zhGDWvf7X3mJ1O0Q93WsAFBAzfK4yY4UvDlVjGe3THqlvVtGZEAvIx3HRnE1fQT54M4n7hNgM62msglKetHP3OR9GHXGSZQWyWYS-9mzrk2dD0d68P8NzWOFUizPz/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/AVvXsEgnWmu8n31Nmauzb0GqBJNQ8oXn5cA57M1MEAFBW67FOeOGBMndzycT7tNH5pPY6Qseo9-oU8renCFyGA9ozQArkCUl1C-AZELR7Pnp0u2pbTux52Bdou-rG6H83T_RWK85Z5-mQ632PvJO/s1600/current-bg.gif ) top left repeat-x;

color:#ffffff;

}

10. Tabbed Grey Drop Down 

HTML CODE: 

<div class="menu">

<ul>

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

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvUjMnVmk-mk2rCfpGNLabF28kwca0yFP5Kxl7ynJlQCSV-CelzdlIJg9MHZa3GdWXA6DYziVjJ2Dg5MlG7z6pg_DMqRNOW4qV_ZglUWteeDnIZtbKV3tb1wDJ9vP_KuOexWp9qU29JzRN/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/AVvXsEiCmRFJxatVNJlsVYZTDUzCB4OFi0xcjqetUiAtJPH4sXjkcHi_LI0HoRQh0cxU-78Rfa_AmeCXBPA0YKV6ecman4T8ZhNUC_fsad3MWmI_SlKVRXKf0bIQhewp6VoO4eqoPzk8HJhAWUci/s1600/current-bg.gif ) top left repeat-x;

color:#ffffff;

}

11. Red Tabbed Drop Down 

HTML CODE: 

<div class="menu">

<ul>

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

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhga4DXW1KKo-edWOgIGevw84MgjFK9XA3CqE4UVBAF5orsbt2INL5VGz9ky12heAAGPpvlyJCuBDTx5cNvl2DrrpSh2VtGfSTh1kmKP70uQkSI84U8P2OurVNNDmXJtqO3IfLlFhuQ508_/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/AVvXsEggn8645qe_5fb4-6aSvMqNvp1xcwBHhMujhKAyAQgdqPi7unvnYUamKOka1Mjli39WmOxPUPoRQeGbsuj40UmHpPiYB8pTgVmo9utHzY2GZ93z9TtWc7BWyB-W114wOJ8yFvk41YON8xtI/s1600/current-bg.gif ) top left repeat-x;

color:#ffffff;

}

12. Black Tabbed Drop Down 

HTML CODE: 

<div class="menu">

<ul>

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

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7H-jKVzKW2trwr-bIxFnbkJg7s65UKKk8i_KZcjXxQliPPBJSOzzwDjzRUm15jTRuPwYODi2LLT2HD3fFrbwqdh2BRACmgGUQkt15uxYje0e4ae7iIHxodbdUEbnAd5DILAGrUasqrLq-/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/AVvXsEjUPBhue4xM5l2PV8I4qTI9yq4uNJKxYTblKNPooJBpKio5-hfy4ejZp6SRKlP0Udt7A56cNBLd04EcvewB5BGETT7JPijWl34Z0z4ZXIJNkUmEU4s58lLq_WuWK064-tmgXdnBfHMELMOX/s1600/current-bg.gif ) top left repeat-x;

color:#ffffff;

}

13. Orange Tabbed Drop Down 

HTML CODE: 

<div class="menu">

<ul>

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

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8CTxqmodUcbpfxervWYnPk8ry-u8l72JyGrqWYD2UKqtpntyM5p1dFM-QQmdWleo_iXlRTh_hjJndQLiTg62jqrk4rzUOoW0y4Xrhi3vbi5Y9pYq1WyTsrxAEnv0SqNX1nQSem0I0dZfy/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/AVvXsEjaDfd4uF0JVMC0qCWh7AdymXvwWs-VtDpFt9dBOs8LssDYTL08aBBUnKSV6v0GL-iBbDT7pBKu08iUkDeT-mdpfg8vGmJrLRfsUmpoNtyBZqcf_GjzvxtYCkB65ADkS3GYBydkAYmNRIlC/s1600/current-bg.gif ) top left repeat-x;

color:#ffffff;

}

14. Simple Red Drop Down Menus 

HTML CODE: 

<ul id="navigation-1">

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

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

<ul class="navigation-2">

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

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

<ul class="navigation-3">

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

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

</ul>

</li>

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

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

<ul class="navigation-3">

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

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

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

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

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

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

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

</ul>

</li>

</ul>

</li>

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

<ul class="navigation-2">

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

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

<ul class="navigation-3">

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

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

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

</ul>

</li>

</ul>

</li>

</ul>

CSS CODE:

div#container

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



h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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



ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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



ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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



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

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

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

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

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

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

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



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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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

15. Simple Black Drop Down Menus 

HTML CODE: 

<ul id="navigation-1">

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

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

<ul class="navigation-2">

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

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

<ul class="navigation-3">

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

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

</ul>

</li>

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

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

<ul class="navigation-3">

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

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

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

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

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

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

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

</ul>

</li>

</ul>

</li>

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

<ul class="navigation-2">

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

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

<ul class="navigation-3">

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

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

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

</ul>

</li>

</ul>

</li>

</ul>

CSS CODE:

div#container

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



h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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



ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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



ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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



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

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

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

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

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

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

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



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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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

16. Simple Blue Drop Down Menus 

HTML CODE: 

<ul id="navigation-1">

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

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

<ul class="navigation-2">

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

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

<ul class="navigation-3">

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

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

</ul>

</li>

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

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

<ul class="navigation-3">

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

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

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

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

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

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

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

</ul>

</li>

</ul>

</li>

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

<ul class="navigation-2">

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

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

<ul class="navigation-3">

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

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

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

</ul>

</li>

</ul>

</li>

</ul>

CSS CODE:

div#container

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



h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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



ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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



ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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



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

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

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

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

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

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

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



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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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

17. Simple Green Drop Down Menus 

HTML CODE: 

<ul id="navigation-1">

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

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

<ul class="navigation-2">

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

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

<ul class="navigation-3">

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

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

</ul>

</li>

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

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

<ul class="navigation-3">

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

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

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

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

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

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

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

</ul>

</li>

</ul>

</li>

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

<ul class="navigation-2">

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

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

<ul class="navigation-3">

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

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

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

</ul>

</li>

</ul>

</li>

</ul>

CSS CODE:

div#container

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



h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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



ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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



ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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



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

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

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

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

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

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

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



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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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

Pilih menu Setiap satu dari daftar yang diberikan di atas


Cara menambahkan Drop Down Widget Menu Untuk Blogger


1. Go To Blogger> Desain

2. Klik Tambah Gadget atau Tambah elemen Halaman

3. Pilih HTML / JavaScript widget

4. Sederhana Tempel Menu Navigasi di dalam Kode HTML / JavaScript widget

5. Tekan Simpan

6. Drag HTML / JavaScript widget dan menjatuhkannya tepat di bawah judul Blog anda, seperti yang ditunjukkan di bawah ini,

 

Untuk mengubah link, Edit ini bagian dari HTML dalam semua kode di bawah ini, 



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

Ganti tanda (#) hash dengan Anda Page Link / URL dan mengganti Home, Produk, CSSDrop Down Menu dll dengan Judul Halaman Anda. Jika Anda ingin menambahkan ataumenghapus tab maka cukup menambahkan atau menghapus baris ini, 


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

Bagaimana menambahkan CSS untuk Menu: - 


Petunjuk Untuk Ikuti:
Login ke Blogger, pergi ke Desain -> Edit HTML dan tanda kotak centang "Expand Template Widget" 

 

- cari kode ]]> </ b: skin> dan paste sebelum Kode CSS: 



.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/AVvXsEinZ8cuPFcY0F7iJnNSdARJMUpwnXMu14yd5AlD0vVh3b2_tNFFuDqE0loOLri9rw-g3IrWRitWmVRfTDQanIEM5Ab1TV_bp6eC-QJaoW8_mjEYTKCs52w1c9xPLc6x2P9wOfJJiIu4OrTP/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/AVvXsEiqWlDLJBdGLF9IyQDrCcNTaBUspgE9Cz94eaquNjfKa9EKIH35XrCJmegOEFeRrvEjyUgzTUsWklDjjPAE7zbricyK-GA0ubaoBM-ZYtIY8ci0X2RYsAKen7LRHM0wS_ltRiIqsM8sXM1U/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/AVvXsEijl_XSxzRtjnV3oPIeZGtXrbuO3uwJyo8EPfBRhjfboeRx2fnIIjlojd9LgnJWZxb7WnRyS7Was5JJNgX89Rej6ycnDvMIO1kOZvVTQ_wSkMjl98jZSD0Ea_DQhJMLH-JP-paiJfbq44MM/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/AVvXsEh8R-SBrSeHSprUDv29DcK-M9wlGggCsn_dAxXz4S02RJ8Cqgt1z3G8dd2qavLglQway8Bc4XiyvllX2udgTiyr0U_ZtRJpqpy3RwMRbjA-vwYCHPJ3du2oqPxFi19Bodq8EjgTC_fUhY3B/s1600/hover_sub.gif ') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

} 


Now Click Save Template


Selesai! Semoga Posting ini akan sangat membantu untuk Pengguna Blogspot.