WEBDESING and SEO: பதினேழு DROP DOWN MENU உங்கள் பிளாக்கருக்கு -HTML & CSS எளிமையான கோடிங்

நாம் அனைவரும் நம் பிளாக்கர் இணையதளத்திற்கு DROP DOWN MENU அமைத்திருப்போம் . இதனால் பல பிரிவுகளை நாம் பகுத்து நம் வாசகர்களுக்கு
கொடுக்க முடியும் . இந்த DROP DOWN MENU நீங்கள் உங்கள் ப்ளாக்கரில் இல்லை எனில் கீழே வரும் பதினேழு வகைகளில் ஏதாவது ஒன்றை உங்கள் வலைப்பதிவில் சேர்த்து கொள்ளுங்கள் .

பிளாக்கர் ACCOUNT -ல் நூலைந்து கொண்டு DESIGN-PAGE ELMENT-CLICK ADD A GEDGET-ADD A PAGE ELMENT -HTML & JAVA SCRIPT கீழே வரும் உங்களுக்கு பிடித்த DROP DOWN MENU கோடிங்கை PASTE செய்யவும் .

17+ Drop Down Me கோடிங் கீழே

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/AVvXsEgC7BOeNFWOB9MGANjylQsVOIBGkk1rMz5UEpM2BsWa1lcI45oQW0vkINzx3Y3_wFyti3znmBJDb9nsg4B_VBm3FMwM8UAQ8anXk8_MvUYf0-YEE8Ii007EUSQiIt8Ee0X8o36z90MT8i1t/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/AVvXsEhZLylKJEjUogGuBr2kX-HWA9nZ2G1QVMj67qcZ7aag4TXcGmV3gody89Jaalq8ccDGEOM1HgXkjJv2s1kOLomZN_R00nRH-3biB1UH8a1868He57IyISn-Ex4muPxlOrgeuAJ-sAhbnNLZ/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/AVvXsEiJzyvjpSjVd1o94OVzOMa5e0b4ZLCAtz_5jmwt3zeVFzFCmPM1QGXvcGj9KiA7wAUlkGQkpPabdc13o5UFYWiEcGP20jfd0OmQitlCaRLfie6sMoxUQbC1pA6kOf1rNVUinL6LlXpdu1Gj/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/AVvXsEhLHnBvEZV8OmjGwoyyWSXZBeR3ysDzTinI-rmwOpfxIFdYsC6GKtwE7mRI8Zm5F9cVkiZpVzMhBXSxNwA1uyWNk_Ah0pXByiJEuo1IDk86JZn-1XF0tO4I1ICU7-dfhdhptHSiOPSb6b1q/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/AVvXsEj701zQJRYv8G4sb6DAsZdYigQ2I-P0FYVL33fJlRWsDreUayAFYZlWb2hMM6rgHH6EOta5dJm4N8Mod1vb0Hv91fldmWgPDF0sFS2zSw6yXusMzzwWJK7OPeQOhBpY_QJKFNmUVUOrDe-s/s1600/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSuw8u5oQ5ZjHsZU1LSE9tEe7cX7yf5rUXdSdcpXeMEsk97oTvCk4UoJ_cFYpK4Q4Y7GxrrouW2JtRLl5hsSE0ntSpejH8lpFNMQpbuiMHgqqY6JvnOCe88v3JADl-6VUVIana8l76VoFF/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/AVvXsEiXcV9bvPGpno6u1gWjvWNDswkK1CcPARdnTh1qUW_d5Hs9taiOmbKKUgX0R2jEVvAYeeTX7kxpg8QeK1YsvAkoZhNKk5SHkEudlDSe3XoBAyLsMG6siLDfBcMiEd2_4AUzXDAyVaVC5dy0/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/AVvXsEjw8zr6H1ff7gkW2N_2RdzykK79KB9RJPWT6zKZ2gqJO_WnadlGUpM-1U0ERs1gvKZx6jZAnWZUKk02295tuR0IQ6wAlUwVWiJMgPPWWC1BpH_V1piW4WB5K634ePrhz7UOAVAE5Pa_MU12/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/AVvXsEjw8zr6H1ff7gkW2N_2RdzykK79KB9RJPWT6zKZ2gqJO_WnadlGUpM-1U0ERs1gvKZx6jZAnWZUKk02295tuR0IQ6wAlUwVWiJMgPPWWC1BpH_V1piW4WB5K634ePrhz7UOAVAE5Pa_MU12/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/AVvXsEgX0ipn7BesoTyPJQ-DsSVwSGpvC0um-5hG_KuTOTapDqsQ9FDXwLBNwrrP4vaMPNh2d4QWw06gl9uewhCgk6TXCPcAm07xKGADiEIcnD8skDOpcv29FHE4jR_MOn4MEzbl3TNsj0wd10cT/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/AVvXsEjvlHDQuBB4G9Y5YdLONix-ixoFtnMuxOWwisDi3O9x2UFXCWzPbMkGqP7-sd5Wlgm8nAyl11MBpZzqfhrAGzWmvRIYP8BaLH2BR9rrxXNtdmBRO7lFM9HGP2v5Y3YeqJOQ97uA4-4lT5x9/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/AVvXsEjvlHDQuBB4G9Y5YdLONix-ixoFtnMuxOWwisDi3O9x2UFXCWzPbMkGqP7-sd5Wlgm8nAyl11MBpZzqfhrAGzWmvRIYP8BaLH2BR9rrxXNtdmBRO7lFM9HGP2v5Y3YeqJOQ97uA4-4lT5x9/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/AVvXsEjV-kIbf0k8uZiN5uMQBlbcZDtHdauXlrHnNi766d8aR0DbfPHsWIipBx6agnhezN_Dc_ygy6b_X1E_6Rsn6CVuLtOSudvk3Wi4o2YO0OaWBVhumV3GFrjWg_VGNkchluuRJM4gKnGZUKgN/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/AVvXsEg9nrAA-DXzS4gH1rHhFoCdAjGtTVbFvi6-9rHtzV7dAvdk8EKH4dIcJH3Xtx9VvAvuHcKsueatjbbRox3Kc56X282YlBXNCsjlLGJcIcn8S2U82VPCSZpkk8_kUb2WjHx7BIqGzVOyYRgH/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/AVvXsEhO34ZoMI6zN1ZZc864et17mqvydBxbNPt7ooME3ewSvjQUtdE_IXhQ9CTw-0CGM4BVUnr0xwRZNFcAQ_Tf7DNLwdtILu6G1h5GYGrolYZ0vnH5or1OCU1plXA1Qa4nJR4xiqhyphenhyphenFu7KaX02/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/AVvXsEhN6okDlfSqmg8jZg5lmRW7z3Zk8235_5Syf04SgLKBs_Y-lTMsOMZ0evdKEIl5ztd_deNbv1ryULZL5tDSCfWNBAdeWbK8WEDjLT9VfeRFjTuY0Szz_e6F8CEjDNz8-hQ8up3IA10LocK4/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/AVvXsEjoicmC0HBDrrekzRSdZWhJq_2qxdDa5M32x0O1LZ-14uo5RUx4kRMAlhSUvEwhy7rNpqaOzwXb6UO-svPAleycCmYN9CsoJSBeJcxMcM6zywQqMGkv6eYtYbMCOWMqQZBzduCF9R6yXyYl/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/AVvXsEh7dPePsB1iISxPM_d4Bg4mYLoO4v0-aWE3CWA4mtz2q0gibzmTHxLQaOimIy4I7x2alz4tbqA6L_WL1yqIKjkcvuVCGNwRJPqeqT5imFA7XsYIZs3AuN-Bw-dLUJZC4lHh87bwY4EJ5u1l/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/AVvXsEghiWR4Flw1IDN7pir80D_b-sG3WeaoZ6VmOPk1SaWYi_1YQsfTmRhLxx2qOYKwA2K1-WOppugBNIk_6wmw1B2kKQ2WsUUmpyhOA7nBO0vUXNvFvsZJBufR8ie8cimjo5DP29KVkk4aQILk/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/AVvXsEi6w-MowBjaEup3gz8LJfDo_QqHSQ_e2kpCAk8tTpPcJjztktVIDIiUyhnM0mtCke-bsrwvReldLDf9SBeaHSLqHzOvEa118UhTVIkrh2mJsGIAVm2je9MkkKbeP1_vf_SlbTbcW854BvB4/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/AVvXsEhN3Fe_hCgJ4J4zKxGrMDoiePT0pAfE9vN1We_tC-DHvxnSDhFbgqrBjTjpU96tIy38J8d8XQLE0r89uv84Tin_XBpqwkz2grZKfVBg4o8D0JdE5NeqhBQvlv6usnncHkDiqCfcxxHTP3au/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTzServMN23M_zX8aPmO8jacBKn2eLiUsBR_hv-ROQXFhHNKQY1otZfAyn9XJqHDjx0cE4BBSct2Ii6CWmFPZKcsZkzuDB6fyddihAmNweb1-UIzymbfrDkDpJdltwgaUASoPX9oJ70WO/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/AVvXsEjgmp7jGHlpfa7nc65JRoWkJnXaawM-f0MnaTGKjv2IGDFZVNJiwZWMnmwO0ETqdwq-MuiCX_1nLZ-KLjPWGp_FsHC0xAbfMXPOZxkSnlKeSanAbXlKFX1TrbOVb0EEu4tHpvPAmfHZIxLc/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/AVvXsEgIW2j2BEpzJLAsQiX7L2sLEOd4dYgbtsfYyBkk0otuAkqP7ncDCD1c2TjcDsdAZtQEndhzKRPyceGD_DU0uBa57Sjb2Of0FYvX5JbxEVg_mlcIIq-dhgEofqY4txIqHDsZq1pEgNGgXqbl/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/AVvXsEj2NiDHgW1RiwLKsw-LOnQ8boNiukTp2BODHQ0ZBwIl8ZseyykDw2_9vwtPGlOEjK5pc-OIQbD4pAQTn9MJuoQKW1LWP0fy8jYT0VVGHXjWAHfmh1zrPbBoDDxFLX6YFU6UYiGtZoPGepR1/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/AVvXsEivrUv54zr3FkUwlCVHzpl8jEHdpkoNObSnxuSlQ4kFke97_K75zFPbq8gJzeRnAmI5U5rZvJYLMDaaLmG66ShqKzI419PklwNVk6V8GW7v6l5vcfYcECFXw9CyML44cnDJ1JoueNnVNLXE/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/AVvXsEivrUv54zr3FkUwlCVHzpl8jEHdpkoNObSnxuSlQ4kFke97_K75zFPbq8gJzeRnAmI5U5rZvJYLMDaaLmG66ShqKzI419PklwNVk6V8GW7v6l5vcfYcECFXw9CyML44cnDJ1JoueNnVNLXE/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/AVvXsEiMAsuLVWIeKCTvffL1KdBU651sFxRVrTeeLJkCjM8WYr0n6r-KyiB7j10xHhohlEPOo89N8zfweg5D_n-OF6ZwfPeqjwJ_S2OoeebwNP33c3GFYdzn7AKJF3QsbWzqbJHAs8zXUeD9u6nz/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/AVvXsEiMAsuLVWIeKCTvffL1KdBU651sFxRVrTeeLJkCjM8WYr0n6r-KyiB7j10xHhohlEPOo89N8zfweg5D_n-OF6ZwfPeqjwJ_S2OoeebwNP33c3GFYdzn7AKJF3QsbWzqbJHAs8zXUeD9u6nz/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/AVvXsEj5U88Q6NXcimtkoKpJHu9TrCAfwItwis3JOJSDF0LTsa6j_Md-6Vki4hyphenhyphenDNQVgdCDQEM9i0IpJ3fXG-tgoUcrXGGgzrF2gLApP-5PbeVl1Pqi7yXhIvz_jcgrlF7e4l7GOOursCpPX8h8e/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/AVvXsEjPeuj8Kzz9kaJOHhnfYCC78zOMJwPI0r-AYVhKyDYeOZ1m-Ff3NQFvvKpW0lGFRhasdmXSAVdTh8Put9cji7HFT8qi36IJaoVC1LWyskUoCMdwXZ75mEdsfFeTCtbhkeP24DValYgnqs4t/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/AVvXsEjDHL0yCjxEX8BoO7WP813cJm2tfl2RzwRoCnA-yijLWlyhpe71oDn5vlYXwSAxu-5l9W05P_Tjf01AKTlkui6-4WBWk7oUpjJF3nts4Ez-QQRvYF-e_v_BBSI4GLD9gxkgRuipmLYKbL2s/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/AVvXsEioRHCwtgLFeZMHGfaSGaoAtGLqgzo-EBYmDBDvi9_2G08GuMAAo_LuVHIAwA25KVdV-UfS_ThayI_UU8AxC4dwxhFqoR_lmo-AxzFUkQsC8vwuwhOCbqqvnRazhyXEtAINMSVdn7htnzWA/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1mIcCipyK6X-6HYroGxy6JAPqHJR_WF6w7klsxD0f81Zhr5G2gALzF3lpcQvpxGWSP0nsRoI0L-8XBufmy0kCCBBoBkraIkgvBinxSNC-cGx3uN3ikUcPN_AVGIXYAAi6YxyiL7FvL3j/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/AVvXsEibiqbddbUlZg59bR36m5cMJJkpWNQGzifr0Lka8dIov9CiGSyhGIsZcV-aA7pSLIetTwEEUhrGead5Tye5J3CP8t7YT4J56o4wtFn0btQy3bIjARJxRFmKCZYBJyJ2oiu74UI6V_zLwT1S/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/AVvXsEj_ezM4PZCWkeIJ96E5rjBK_RCxk_bcSCQ4k84piMhEvB0SEyBlKD9T3dCsBEwsiQrkVNyBGzIMv6aN2hhUXpCqdssNRNGjGAB-_SB1QoSD534OVnNdrN1Wbe8w4GG0a8QACj3X0mr63YE8/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/AVvXsEj_ezM4PZCWkeIJ96E5rjBK_RCxk_bcSCQ4k84piMhEvB0SEyBlKD9T3dCsBEwsiQrkVNyBGzIMv6aN2hhUXpCqdssNRNGjGAB-_SB1QoSD534OVnNdrN1Wbe8w4GG0a8QACj3X0mr63YE8/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/AVvXsEiP7NdpYmnTUdVk1PccQenJ7C8r9onJlStxOE3awDWbswUH_nQCYddOaJvdnkgIX5bTZ5MkbvjhVC7ds9XX9uTncfltyR5oXwaDmY3Mmk3ZUWoFusTjTELWTFu5PKhf1KB5yaWPKHH2kBnC/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/AVvXsEhrA-omvagaVmvd-gcoL53CPNGkWcc6dezSk-fbNtXfrsH2CN_enJ7f-21aDNZxjfW2aaCYhcw-_A_GQTMyuKdM9XEpRcLKTGYQnmA8mFpudVN3GillmzMaob_zuE_trEnU2V87jfz-VfZh/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/AVvXsEjr8EVoO-S-n2LOL1xyuQPlot_JWxHwBuh_XiHqQ7k0g6DMdMylJ3gdoU51fF_PpVTsQqn1wxZM12yq3uYajp5EegIrNfmT4C-18sQocqpVAGGBXMxDfabKr4pek00C9eXgHGWUbvTbJuli/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYmbE14yrnew1hFWYPurL721LtYYFyleP7Mynb03NxNhBdsXyko6h6b9yFEVbU_bWjjrx8qYar6tcRupsjJhlgc0cnnJGe43r2V37tx6d8Ymi_Z3y8XtpPQvgQH62bWEYrm2ggQIyw9hBH/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/AVvXsEj0thODNT85iU90r0UK-jwP-mTK1RRriYqMQn_M4wWTxjfpM9bZugNOhUSC4Cxwxcqh7sgMKisvgQMZmlM8OBhvkPfCR142Hx2IkMJMNBJt0fFhfkDOa-e5vLXVlhHHqHB2DR-OlmnfO7JS/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/AVvXsEiAotNRx6HEkbJwhqj4kAwEXPXckQ9nxmVi6Zo4PeRPNGxvRrtk_qal5LNyCqkW7XgCYxhZTnlCrIpXOW0KviYNc0tV2J6nNgg5pGKqVRFCYMc5SyHbJL1NL7JkI5mVeVfivUwudncOqNv2/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/AVvXsEiAotNRx6HEkbJwhqj4kAwEXPXckQ9nxmVi6Zo4PeRPNGxvRrtk_qal5LNyCqkW7XgCYxhZTnlCrIpXOW0KviYNc0tV2J6nNgg5pGKqVRFCYMc5SyHbJL1NL7JkI5mVeVfivUwudncOqNv2/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/AVvXsEhTzIRXHnISRiJnRNT_2pDCgp60SlUcL9Z16AinG1TB2fqJTyh1nwzTSEsbFckMauc4VbGAZuMJiy7Jz8BHJ1yAwzWDtd1Ki0sFMPrqoJe2NUs0Dk9Q64Qf0oaNJ2h6K386zHIbUIQcL8k8/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/AVvXsEglUFxPt6xBkdwSGXt6v8eYq2tu34o_oxMFXfKochKOPEz_M0Xh0b0Ik9gIkQV_k4-1QNxHZE_aWOEw_dFtww3WswmUjG5zf4G1MZH_AhVoh5T9AeYCnvEu1YmfbYXI8EFNkPUS7_bYxkKV/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/AVvXsEghjQcw2OIfdxGG4WS7bfcHBRRJPZtHosnTpdYFSXnecRyq395fiNV_VfNtRJr8TDlfuJCI-S-NnrxN8JD4uUxijG7mEUMcplLZid1kEtG1nPW8pI0ej2wkgTPu0gy3U5_UWpbleoKS4n3S/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6QBIKvca7Z1X4KfVvP3zGHYzUay9z5xuMtijj1HSGDr_LwvCX6hlpi1R4-OjUitayq0Nf2MMdS825mklGMxFHc9_gjv4GHQ4TXjlKfAHDDXelsXlE_L9xpWl_r3mhyphenhyphenKyUbVvYzuWsKgL/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/AVvXsEiJnfjUkoYvBdCslqMAeN27WXu7uzzR2u723RsXkn5_ZchWVgdiODfslqUukNsEBAhYiCsZeE1QOCQXgD7NVZawjUwh4cZZLnyRKAltFF4b1fmTmQTry4GEolLeSgdCaSUm3Mrzwe1aH7d-/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/AVvXsEh-vfEdyBXmpVwbJ5a5fNjIPknVMPz02EKNlVp9ZtMW1eOaIFSovBQ9KdZ1hPhPk71dnWyUWmxt98vgCgdO9VSTGHZQyrdbDNyXx_OEyYIIOO7jeS2vPzZrVFio6-y7fPDE6TcTW3Nm3N3j/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/AVvXsEh-vfEdyBXmpVwbJ5a5fNjIPknVMPz02EKNlVp9ZtMW1eOaIFSovBQ9KdZ1hPhPk71dnWyUWmxt98vgCgdO9VSTGHZQyrdbDNyXx_OEyYIIOO7jeS2vPzZrVFio6-y7fPDE6TcTW3Nm3N3j/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/AVvXsEim89JJa8l_hGKjHgNPC-tf2KFKdw5wDeIHeGfKoAF2fAKPeUPGKgtJ_H122ZALKYrHv4SnuDrZHzM8HUZ7MvzSBUluxrOIK3unpu2u1nY8kwv9LU_aaSUbuX9InRPpTUub57pdI87PDVQN/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/AVvXsEj73raSAKYIZI4TajR4w-lgBEAjtzRirT5m4xeULMF-VwHygm4y18Ib2U1KEVSn4lOPJYjDZ6ZM2kZ0GyycOo9_nPYZrvoBP-AdhRUpq2dB0RLHORLSnT4bVokPJbdD7OumL5lHAlf5rF1C/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/AVvXsEiTehxn0GJMkO5cuJ00-5S10tPqRc4hVNnWxOjgmcicvVJUyVNrhBcHHHtRNLHMmaZF-PvBuPcQZHODC9XxILP3pTmEW5zGPwHOcIQWneZiVHhMsLqdJ3LzY_l3jqrhCtX4We9SM6vGDsYY/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/AVvXsEhk3XdcCvCTjfX9qN4i75zEddLHoOVOPmzGNlStdi995DpRc9xCj_pYO-SW_7EolPY-GsJHqAIbfV8HLbcMBzANOT69QjmAG8QOFmsrybnbw9rzDIK-dlJnSiZ3qBCXA8_i4JvA9ZFu9D3W/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/AVvXsEjXXG_EWXc2bK9C_Z-naZySdO4cy9P9ETbj-fEyL2lo4myOnanrNEhjefUdbrzbYeAFL8P4IcqBsFw8h6WHesljwPccBtkWyrXo_FYqFOVzVLbemYVvx-G8T5MYGhuZaMt-ISbaYosyGUy5/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/AVvXsEimc9GVUCNZErqo9EFOZnynzR7UxrMIyPwdWSkklgRcT4lKgY38DwdAXV9xWV1557v5_wg5hcRcDfVRC1qEQ9jmXDxk-OR0WwTDWTzbzdmDJ9CzlNYrLihcHtWgGzPEcMdtK2B7Un5YZ7r4/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/AVvXsEhtpQd_7fDBiG7hnwd5xdtPnSYwQHFyjTzwENoRPmFE-0pLAId-n0RRk2uz3ACx_NS4_3WXrZHtqDiZnVpH_gU9ohuw5IIpN7SZNIAVOR70OCiZTFS28x57Wck1x1LJ47jCzBe5oYkQfw1g/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/AVvXsEgnFoPa2T01S9l8zHZXFXPXi8UwzapyDwnu84lmIdic6WBGa_OM7YjHiuPVVhazG_UUyMwuV-y3B4vLSwLjMl2rioYrewWtZUAz9chyphenhyphenZXD6s7miTO1xz7pZGBgznmyG83VlrBUDp18uGR16/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/AVvXsEjvOD2dySMW262r-ptZq0cM1zqsAHauAD9IH5vO3wLlEwN0UyPZpJVh7Zq-OVNgymZwXrPoAcUWA17B0Uh0sQmwLpRncH7VeAfscR_i9PGBtRxOGyuZE1_8irCs49hOQ3eNLksDQzSm4JHx/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/AVvXsEgCtARtUN-jXfDUa0d3sBiEJnUz2MvdFrNJjo5yJ0T2iL8NYAi-zRk6DWxhJReDms2Cz__ndNKWd5rLj3PycIUP_-eco4M2gw9ocq1j5-qMlQj75CTuUog4KH0riCy6jfrL72enoEYy83IY/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/AVvXsEh9RUSGJ-2vghcyYPQZPf9F2QX_-Oc97Ak655h8TsdYa6aJtc73MI-gG6lva58GcLWglq9kREz0AkKhr-Ur7AfBcfjGneVYn5E8I3J813uAQWBoQEDGkaAt68cDGeQrRwlDY-ZN9RccqL2G/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/AVvXsEh2GadYQ4LwavTtZtj3hWal1YX3GIBbRr9YO2uoAI0f3L35ChL0ShRnkOOrDFckYHUNxA9k5pY3UcRUTXXPWAcG9_zOD04dsD5Xf2U7ephj6Xud7RVSCD12w0AkmOBGtkBuAwZmxKJtNoiD/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

14. Simple Red Drop Down Menus

HTML CODE:

<ul id="navigation-1">

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

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

<ul class="navigation-2">

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

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>

<ul class="navigation-3">

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

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

</ul>

</li>

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

<li><a href="#" title="Accessories">Accessories <span>»</span></a>

<ul class="navigation-3">

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

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

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

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

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

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

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

</ul>

</li>

</ul>

</li>

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

<ul class="navigation-2">

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

<li><a href="#" title="International">International <span>»</span></a>

<ul class="navigation-3">

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

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

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

</ul>

</li>

</ul>

</li>

</ul>

CSS CODE:

div#container

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

h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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

ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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

ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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

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

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

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

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

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

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

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

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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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

15. Simple Black Drop Down Menus

HTML CODE:

CSS CODE:

16. Simple Blue Drop Down Menus

HTML CODE:

CSS CODE:

17. Simple Green Drop Down Menus

HTML CODE:

CSS CODE:

ஏதாவது ஒன்றை தேர்வு செய்து கொள்ளுங்கள் .

Add Drop Down Menu சேர்ப்பது எப்படி

1.பிளாக்கர் டாஸ்போர்டு க்கு செல்லுங்கள் > Design

2. Add a Gadget or Add a Page element கிளிக் செய்யுங்கள்

3. உங்களுக்கு பிடித்த DROP DOWN MENUவின் கோடிங்கை PASTE செய்யுங்கள் HTML/JavaScript widget

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

5. Hit Save

6.HTML/JavaScript widget ஐ இழுத்து header பகுதில் விடவும் .

கீழே உள்ள அனைத்து கோடிங்கையும் மாற்ற வேண்டும்

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

அதற்க்கு பதிலாக கீழேஉள்ள கோடிங்கை PASTE செய்யவும்

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

CSS MENU வை சேர்ப்பது எப்படி

Blogger, Design -> Edit HTML and mark the tick box "Expand Widget Templates"

- இந்த கோடிங்கை தேடுங்கள் ]]></b:skin>மற்றும் அதற்க்கு முன்பாக கீழே வரும் கோடிங்கை PASTE செய்யவும் :

.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/AVvXsEgC7BOeNFWOB9MGANjylQsVOIBGkk1rMz5UEpM2BsWa1lcI45oQW0vkINzx3Y3_wFyti3znmBJDb9nsg4B_VBm3FMwM8UAQ8anXk8_MvUYf0-YEE8Ii007EUSQiIt8Ee0X8o36z90MT8i1t/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/AVvXsEhZLylKJEjUogGuBr2kX-HWA9nZ2G1QVMj67qcZ7aag4TXcGmV3gody89Jaalq8ccDGEOM1HgXkjJv2s1kOLomZN_R00nRH-3biB1UH8a1868He57IyISn-Ex4muPxlOrgeuAJ-sAhbnNLZ/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/AVvXsEiJzyvjpSjVd1o94OVzOMa5e0b4ZLCAtz_5jmwt3zeVFzFCmPM1QGXvcGj9KiA7wAUlkGQkpPabdc13o5UFYWiEcGP20jfd0OmQitlCaRLfie6sMoxUQbC1pA6kOf1rNVUinL6LlXpdu1Gj/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/AVvXsEhLHnBvEZV8OmjGwoyyWSXZBeR3ysDzTinI-rmwOpfxIFdYsC6GKtwE7mRI8Zm5F9cVkiZpVzMhBXSxNwA1uyWNk_Ah0pXByiJEuo1IDk86JZn-1XF0tO4I1ICU7-dfhdhptHSiOPSb6b1q/s1600/hover_sub.gif') center left no-repeat;




border:0px;



color:#ffffff;



text-decoration:none;



}



.menu p{



clear:left;




}

Save Templateகொடுத்துவிடுங்கள்

அவ்வளவு தான் .

Tuesday, August 9, 2011

பதினேழு DROP DOWN MENU உங்கள் பிளாக்கருக்கு -HTML & CSS எளிமையான கோடிங்

17+ Drop Down Me கோடிங் கீழே