17 Horizontal dropdown Css/Html Menu ~ Tips n Tricks

Here is the list of 17 beautiful horizontal drop down Css/HTML Menu for blogger

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/AVvXsEhMQf44f_BXZAlU6A_EC_sDrHa_a4iCKncwULrIJkDC996vx8xYu5Cs0qGsMQqsL2EKNpDNQlZYpojS9ODMu8JT1rSJwm1r5-669uvJUZGmItQNOQoU22NOFGRSoRnv0jS_g7j7iPBUqCIO/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/AVvXsEjJL-cTOVSfAZlVMP5-H_8nc1oQW-HyA8btu__EQljnBCk5S3AqqheCCW6Q3S8NSI2PQq2Fx0dWo_w-o7vVMy8892ufLYH_AK0Pu1Sy09k6OA3J1FqAQDI2zM6pR_pgGSC5a7YtTgvT0YDV/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/AVvXsEgXTb7_RSiA05TexKdyQwpNYeeOabrbAsEnMQpU_E70FFJJv0ykpRjvE2cIM24YEcKLObN5GENVTAohKeTGfDGnZOLQ1ebNWHLZNShIFQBg0KAiRj1qT0841nBmOB5ubA7sKpToz-BGP39g/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/AVvXsEg9y4ROhOQ52pzzvoUloviyr4dINIDTm4RqHfc8zqaibb6mcG-ME898964SmtWgbzzuFHlgW9F5A6-WeEPDhoh0XLSspH5gqz9nlpFCO8jwcLCND6iFyov6sw89XnZSQ5sj7AdvSRW3snrE/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/AVvXsEjNpIzCD_QRtlDCvkyaD3rccoJQP75J7yjZBzs189LHeY52BJEY3g6zYdBJgCnzAiZ9NS9SxbDi9Lofx-W3uIIIdH7cswIReqyMmeZ54WSP08HMQWUHnttsfGP3a3FrXTlwbsM05RuFGcjQ/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheeAV1q315M7GMq0aDLMC2aj_5zultJ_nVO7heGaXd6sBybtJ_S_XT33svMrbB5IfuIQN8sB6DB5d9yw1srZMYKojaTzpTRbJ5JAaeqHvOnzgVSIi9VCRQzt-tat4yGx7yElY0foQ-qkay/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/AVvXsEiVHyDhenljYa5xGdteddOBASKGg7hJnjqIpOj9en4K5kLRkr9pBTs3Oegd4nerUvEvj_Vdv4o92Evs3F0KMuHkcy1-5IvAUNkKtoK_fdw12Le5-aWfbSXXCWgiMwF_RNeKQe9GMEfp1XUZ/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/AVvXsEikpohB4V3DoNolpl7JVu3J8E9peTbxpoKm1NodXPXHvgQ662CLMB1NvgcmLW4qESnEiV2NxDZYdr3azNUJlmyh8Y2TjBzHWmKh-nBgF47ydiZT5bF-Vxm2UDf8gNMCsH9ATov5lHmKwlNY/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/AVvXsEikpohB4V3DoNolpl7JVu3J8E9peTbxpoKm1NodXPXHvgQ662CLMB1NvgcmLW4qESnEiV2NxDZYdr3azNUJlmyh8Y2TjBzHWmKh-nBgF47ydiZT5bF-Vxm2UDf8gNMCsH9ATov5lHmKwlNY/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/AVvXsEg46-IGaV3KNJFAAp03Xr1fyc56UFSZ_R7DqmDegNMyRoYbvKGCamFZybkep19LHGB-sp7km-MBx7P9qOPIrxR53WQqTGMp0H7C3vvSm0CnvuvNXv2uEzDSitrq-OTbj5fdTEkZ4faVJDdS/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/AVvXsEjelIFHW4owgIb2Pxv09Xu0sZkLcFNU2tIj1azgPKLN9YFpQsbYqRU4FaIr8XvrtoEGzSYSnrM8JiBElD64jhGRL_KeD7ciFLZyWvtkflDmxHTYbCjwsdDbGBXk-say_71DDOn3hlU_Cx_x/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/AVvXsEjelIFHW4owgIb2Pxv09Xu0sZkLcFNU2tIj1azgPKLN9YFpQsbYqRU4FaIr8XvrtoEGzSYSnrM8JiBElD64jhGRL_KeD7ciFLZyWvtkflDmxHTYbCjwsdDbGBXk-say_71DDOn3hlU_Cx_x/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/AVvXsEi1e8jYQ_bIhAgVG9FyAjuKyaTqgrhCOI1T6RHeEz_9oNF4luzT_TvGBryDwm_Bz3p55_2Nrp4Gmc0pY1UWenkiWdofhQIrgdcMGceUaLGcspsmRauvqMHq3M8eqSrMLZKdYbpplTPNI_gm/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/AVvXsEgZ_Og-NkkFQMKwBAjixZoLRbSFYrOvcEAC9iacEpFkbkX944h9Tvcga0t2i5ExTPs9QexB6L5sGdYN7znBwkG7H1XdTTtEpI9iw0c3WEhxjm9EFZu0qszAXtHdYiJNLjLPkY1t2w6BH40f/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/AVvXsEj2lFy2zxdSyuuCayMLmQqKKOIQlYUguX6c6hVmSsKJwA1dTIohdpJjQLa8apIczzGElAa5oZyMkyugVp1g-hhiOivtp5948y7Q__dSpgbEJ1yos3P95zbcoP4WkkQWpHMk4RJK5nNsEgSI/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/AVvXsEhUs-cyTJbFMeQAZpY9YHA7eqhJliSlnsRh_VwZPhAnXdGAd3FJ3mA263MFUtfCH5PsMpMfKJtKg-0u9_zGElIUR8uYy_CU-jK-Hxuv8HYjXrle5uANj85T1tdtSsjJIiTZYFLcdYzQKMH2/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/AVvXsEjrRAqIaq7TxxXmtdhpWXgNN6KXUp3wynjbbWAh8vcHsB64mzVMw56YBGYyZvAafnOYQGwfvsF3mxSx4IdilQ2mM18HA_Na1hYb3h_CfN9jTusdYxHY2APmOwBKCGz0ljg3UrHytGS6lGtx/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/AVvXsEgxd0POpgQN1tr6nPMzro-PWJfGyqOxgxI2xHT5n5gTEnkylS2O17EuvbQhioQAjLqwpvhxhOALCuEYqt6WQxIvKPXodyDTyCyp4QiMI_gc2Z7qB-jeujErIEbhe_OO4FgX4rDG2w9OaLJb/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/AVvXsEhP3dcifjdhiMpzazgWu5nlvCuVBSdXIutQHK27TALOGwfPGxijgmTKBObDwaiVRR5eDwFYVDzwidkVD8Gexi8luu4f1LnPimIlT6nmLn9Qnb-paei_7wN5zAehq1bwpj7-AJJg6oMn867k/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/AVvXsEiBBrNoMEZ7JOlrQSX8IE-siJ2K_N4SZJBUi5Tt-m7o6iAzrE_q6cVgR1lF4VxmVIhCntzJDWN7dUY4jf73XOPBR7YkdUv38SU0_tNybD9IogYJ6dlupWtXpG8xfH-qq_wheauWH630Ja0y/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/AVvXsEhMxkVh82zU5Hjughb5VFdcDDGpUczVDLzcIkTMa6SRb7dayWdFneHF7aUFIkEnxYc-WzqB7H-gnhC9R5i1LuZAbFBv9A2n4PZWwpfL02SNax-KazpD4RAXN5XBGcBdBySx_hBdSN6K1BvP/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJanaa8NKrjS1kHvTHfqQF9HhJ_GcYcqT6GWa0IjFAzEgDsKFfPpFalk6EfZQYFmlB4dtxkdZIrzpHgKLaHDQCg-_DVVWFB4QMnmc-52l0LBFXAb1CflH0ZsoMootWEFxBIVtHJBhTuCt/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/AVvXsEgncGZ2-EsnZe4RGHvKQOWDLlqZzv_cPMvnL-lGHTJ0QQ6pc3FDHxVUHOeq5EnqLg7g41Ozqv4NjmvUgQY_BpRfcC14j_3fdKWo5vOv9V4-z9h8ZrMmkKdLHza3oBQdNA8wwox5AHxrVYNE/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/AVvXsEg_Uvl7ACLGxYT9bMe1kqg3qrRb66qeAhmK0Pvm040A6-n7GMcx94MJCktB3o3Gle-h9Wdpwwq155lQHvo5QKGZcb0Pq-Vcp0ykU3XAEG8XkuukFsEJrnfLMt2ERtmFGzHl7uYERYndH5xo/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/AVvXsEgj6_rWbbbiRDzuZQMwHMrkg7_rnSXvz9O4g1D_LGvwF44vS6Ft6cXfaQ3OytV_G39TQ1EwQCzSLw0wj9xPWEJMOr8jGE8v-W5EkcFGSiB8o9gWOuzGgaB495zp9LfoapHk12J69LYOvnXV/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/AVvXsEjbLjeHoXmaWxuA_qiin9VHhtzokwLQ6gWeKdTh4CyK3aLAl6qbokraxpvrN0J8yAmCm5hTxkLH9EssTeuSBS80bAQPivrsYUgDpb9bIH8uPfA78i2x2QVTAMh2TIfEOZ1imS6r1Wj_0OpD/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/AVvXsEjbLjeHoXmaWxuA_qiin9VHhtzokwLQ6gWeKdTh4CyK3aLAl6qbokraxpvrN0J8yAmCm5hTxkLH9EssTeuSBS80bAQPivrsYUgDpb9bIH8uPfA78i2x2QVTAMh2TIfEOZ1imS6r1Wj_0OpD/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/AVvXsEhtxmoUD6VBMkZEz-ukOQArD_OpsBmT_fKyVTm1pQTJ_9o0UuRN0RUFGgX4l9Ioj3w5dJfOurWMhgKj0OwQ0sXNkgo0Fb0oMwS5K5O1xE3Osr6T4rL4EjixUGqb87G_kiESqH2uS1Jfu1Jp/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/AVvXsEhtxmoUD6VBMkZEz-ukOQArD_OpsBmT_fKyVTm1pQTJ_9o0UuRN0RUFGgX4l9Ioj3w5dJfOurWMhgKj0OwQ0sXNkgo0Fb0oMwS5K5O1xE3Osr6T4rL4EjixUGqb87G_kiESqH2uS1Jfu1Jp/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/AVvXsEjjTSHFYPVlWJW0NTnNODQScP_Ea4Z_xAVrmQsfBrqnAS812vzbKJk0Kud-okwlK8vkSGXIwwRjDGL3NgGbevjYdgoQag4WOA7qn95kcK88YRWPLMeNJd_WIhNrNsIvrUAD6PAWie4warI8/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/AVvXsEg_Wr3LB1qwfGDXx7yLthL2cqoYRPEC4usSNGkCbdnajjMNIyFldOjN2X2iY0ugnSthDlOFVgSLlrGvvkyP-8y_SKOl2itx3hhICwj1yEOVthkklzV6n1osmaBi8waN1g52ecBdlQJtK8Mt/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/AVvXsEjbtjSSBE1AQZ5mAPMmJsJGL5GakIIIqtx3Bb8of32Izn1KBbjCpy-itJpgzaXBDRIXnEsnr0fc7b0n9q9PIjJzsDb2QKfhpUs9vEJtlXQppu_uOXXff9eUNhcb9XUI2rzddkeaAKlVpRQB/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/AVvXsEhg1FSp2oJyFakSm11gHBueRnwtII6C1vAkjqcEaGxykv5ODLXSEcdhTFCrukHmiRrUN3-kxZPADU3E6lwauGsDuo5ujtAYe6BhIup3Q-e0_KLJ_r_pHX8aLaRXNKwU9z9J0FU5J5szYegO/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwWmFnmxnaU_kp64ISCmVLhh31YUy700_5_KHoFKAQwh4fghkZuf-tkOE69n13NZDtLlahsSUfippwH9TZHcL1wW9iwY_AD3tfyoku5aHUFDQAk_ie4KKxRaeiXYok4iZJ6NLQ_4AxvDma/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/AVvXsEhrC6WSyjULnq-TaodJTX2t5zYRIkoWUy7wSlqHSIdKisJHz2ZpFexfVlFBD71Sy5-dF0JjVp_4QH9U5wQ57QTj3_u9bwuTyHt_o6HxqGzv49eVAioF8xK1i7mksXg4k8Ki5hveHOV4KcTq/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/AVvXsEi74L7dVaYYl8t7pv0vnBbXvCcJEHowcroJjOPfSyvY832IwQGQG-FQVjf34wNzk0I-pvscWu50nGvPEtmT3ZfFqhUS_WNeJ3c4n4LDEY5_b9wrUS_tGBxxhcO39AaIMakaVgjl0v5haXL-/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/AVvXsEi74L7dVaYYl8t7pv0vnBbXvCcJEHowcroJjOPfSyvY832IwQGQG-FQVjf34wNzk0I-pvscWu50nGvPEtmT3ZfFqhUS_WNeJ3c4n4LDEY5_b9wrUS_tGBxxhcO39AaIMakaVgjl0v5haXL-/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/AVvXsEhsoDdlRuhPNZ8XauDmN1lhkIgmfFS5ZK0OS16mpDWOyPrcLgQ9K_rhffREb14tAsdueR6REZHgvdq2xcLMF1R4WGEUZSAYoc9UgVGkbR3gbKncxMF4w520js6TYAL8kcZJR-RHA4IKlwiU/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/AVvXsEhf0E4lbkxe3rI1R-ZdFw3LXOsLfBTnpDEwyOgVigQvVn1yb8jFoPBZsibUYE-c23V3bRRMh4IJZFsqbP11YJWjxNLqWxLLCWtgdoRBV24acLkfHLA-rOzc5Kl664OhMd7sqV3uKRziYXlK/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/AVvXsEhmOVYyrmp9ADky4cK8xByj_NdDPiU2DPI6iJeLwoVTcytHqMRsJMt_-0Hwi4CyKTZyTsUdF3C2FR1A_ruIpkpnbzH_gghhEWCztk69rBM7P2AkXPtQ04JthBV6NvDnYD4NLM5V9KwnRZbU/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFzUDkWCSr7SPVWUedJ5OcVUad4l8v9qIPsCcE771QUixCITtVWhoYPyXpAU4s_hEo6N-xMxyX4QutkoK4xulqitp80y92KIVEZkC_b5nMwcTsxoV8nGbjJidvB5gvUjZf9FJNvvNKc4U/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/AVvXsEjT-E-HpM8MAAdIl2b5KjT1_VyRPyMRcx-zF0pyunGA-tq3V8T3E8mW4C40dWzjLnyxD6y7DxZj1cbZfpFz8d2K_yH5uWVsYtVt6dHX1ySLZfnqALwDus-7TP9nqVMBXV3Sjtr0rLxquNbi/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/AVvXsEiCxeufyNC6k07OW1xeG1L0WlcEd47huFED8gXzZDLgA1ZWSnIJ5S2jxIqkb1h-AZu0PxLu27vEtz6075gou6ukO9DNsW5fntQlk2EPMyo8qnDrE4y_wZKPsjmyEN6AUb5iXBCxD4X3D8Gq/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/AVvXsEiCxeufyNC6k07OW1xeG1L0WlcEd47huFED8gXzZDLgA1ZWSnIJ5S2jxIqkb1h-AZu0PxLu27vEtz6075gou6ukO9DNsW5fntQlk2EPMyo8qnDrE4y_wZKPsjmyEN6AUb5iXBCxD4X3D8Gq/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/AVvXsEiYrtkDuembCZPgPSF4ETTn9NtCxrRYT-C5ym_LWkws1PVE2lQzDS_jXOzmLn69UQiKNMPRj-asHBWJOKgJxtajIz94iCKu_B6JMLgzr1g1u1XeK3WmzBlwNjaud2QSwB0PcNMyuf1yat8p/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/AVvXsEi9x6H_d-UYBrO-4gsAcjWox_7nSYhIS0Id6CV3WPRjM6vjlaP7OkB5a-rCAyJLbC6-gF6vp0Iuz6YQu-DUBEe1MKm7hoP-_zO4l5IBiadbaw_ibid1HofZS6sYpyEEdDFzIwth_5AZjkBa/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/AVvXsEh5O5b74ao1K80DtRhCVwEtTlV9m2iBDK6SlGDB14X9OQypjmU7livlnnNMra09dDD1NoVlS2dAQTEsnXUMNhYIQ__JKdQKPs3ujk9NHi7HdsHI8EwgVea9s91fAdWtuuU0OH-vHfY__Cyp/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSCYpsctk7Ultwte_0M6ycInOHuIOx7Zq9o34ZukfYTonMBySbAT6x5tg6Rn1MX_mreYQgaRz3_EEySci1-vrDtUaXHQfYYOwnNcCZADW4Xs8FLS5wMNqWcpWhCbxqy1jrIuhGfbmrwCQ/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/AVvXsEiy7WsmsPZ1lcbOBL1yZ-rPdNiFYJ7wkjmNHUcolNqGAOYzljo_9C4xxxdbvZL3NxgYz4NFtFXU0uyFhnWvUzpbcwxxphhwKjS_V3oNTfZMi8UjAabvaivqVYeq8T10dKQpRtXpYTvE7Xa7/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/AVvXsEj97470JeL3jTkz-ZYxmC6d7cVIp82Yd0aYPY-i3REbHXw9iZaP8pwEk7MjXjfjxaRTinchWpksmFEZnC3oGSPrIC4I7LhGwRA3Qy6mygkGw-2IUG6kp2XQSv-pqzeAGYKEmoo7rzAvitlR/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/AVvXsEj97470JeL3jTkz-ZYxmC6d7cVIp82Yd0aYPY-i3REbHXw9iZaP8pwEk7MjXjfjxaRTinchWpksmFEZnC3oGSPrIC4I7LhGwRA3Qy6mygkGw-2IUG6kp2XQSv-pqzeAGYKEmoo7rzAvitlR/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/AVvXsEipO17ghk6EFDBjPubm3b7_qKOscfo4AfwQpM3iTgRMGG7bT0UArrHfLj3pogBmZj3ENarI7ZPELQ0gmmlrjZ0Ou8XhAya0XYopMQNijzVFvp2pBnasZo_sC5slNvBX4IJbDd0BlZedIQrr/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/AVvXsEiX2txVc8aQgrpztyfWr2GhffmygU3J90NnXrYQ_Ie2OslarHEkXLjf3jfD6mjQDtAOzx8pYGaFHRnDtItG7NlT0gCdOIFlnU2ry_KXgXB_KtYdNuA8Kp-M0JfH-xB1PS1Y5mYDWEvHb2eR/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/AVvXsEjhR3oMIWg-PoPoNMR9kic9cQ0ur_mmauxaZ-v7AJGEOV1OyIKZtNX5_kov6GkgK2RhctGgyB2mRg8GVylx0y9DSkQnPS8QagnZhUD8TmvrysIUEaa_1fi28i8-fEIcXGDp4ZlPyq0arliT/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/AVvXsEiG3ivlg6kP4HeOwan3f761QyDQnCo6nMry8zD5duCvi2aQfqOQcgWIspJCu__mkouJ_6xxt7k0gArmweyH-7rYiPRYOaXacm8qUJDzuuEn7oXGeIUzFhRlhIIC7zEyDP8jY7pcGU3E7i1Z/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/AVvXsEjwSOHDyHW5iMfA7j60o-_S86ThMVRYGAbKBTCX0rN9FkidqApC77-SO_yv0-WZVJvher7W65dZrJ-mg2U_NHfqnWTejRXi36vDOm7jbFWMic7lBn1Jk5FfkYWQbJtNnrIZkyEBZXCJ6lIc/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/AVvXsEidX_1miXEac1FO76JrY8lWd2ilaWHumqZBe_KP1Gy_Jg2jsECl1YPhrmW_K-R7cyDq6oUegTsNbRFGRhGjlPJ3q57MDKz0xSHvHpQce3zu5Y3IIIWzqY3frkLZcopLrJag3yPEGV17eIZi/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/AVvXsEhEhyphenhyphenuhpBrAc5jCNnkYXelSrKPLT228m1A2bAf9SlG1ewv1NCFgsMrt3E5CjR0bqUvojNE6vrCukPGEWSq_BTABapK-q8JV1Eq6JXp1OyyMUGWgz9pQmrFqUVxZBu2R3ymQNZ4RZwyyUv-e/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/AVvXsEiHsKEW-9QJxUIqU54PUE1Wj6LZa2hO5lI0EK9PC3qhqce15_zmOT3h1b4voh5smNB7LVR9RP-D8AHs4QZMwPuWGYVGUuVnJuTjTciQ9Sb2NfskOpmHwGhfGsBAV2-T-n4l9cL8alWTrTMP/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/AVvXsEiJ8_2XTpUXuxYmtWNQbZv8afGOJlcIPWz3F08_kFIjc4tBUwMGRbavPz0MZm2mINn9GJf4PR92ifvR9_WPikzsiUj0ErqbwQnCfzM0JuEDFapohcIXHu9WJqJ6FA2sgOzwL5bfx2rCH4uB/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/AVvXsEgliHmnLatvRpvZgw4F-bRxSk3-h_3tuXt_vcBEu0vHfLl6zqx6MnRhf9qBtb3kahyphenhyphenfx-SVv7MveDhpwM1dHwJ5arIjQoevn33t8qREZMWA4OHqXbbRglGVzVZyYynL20gnhkwvIR66HUU1/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/AVvXsEgZnvaW_zfnguo_u6RaF5dRXP2l-5v3uwzrCv5TCHET_f9Ker8iAOJl8F9bMi4leyK8sgTp734UMCuSP8CEF7BqeqFPL90KwFMozEqGcchwV3eSur-pTtGa7NmRaMfs8GiTr_tV0ww7JnwQ/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/AVvXsEgTF7ELUQ_HsyTRyfAu7oOfybdxw-JiyxZ5Hu6SBzIrZPrWukUGma3vHzUWcNIA-UL6TpiO9diUya56PVUFP6GfRZGVeGnJdwjTeyOlCwPkxB1QJwQpn0air2RSZfKyOy5URJ0YeJVau1cR/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; }