73D41416194E8A7C390936971FB2B74B Chira Sathi: 17+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes

Friday, June 10, 2011

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

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





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






Here's the code 17+ Drop Down Menu




1. Massive Blue Drop Down menu 





HTML CODE:





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/AVvXsEjGNe9PvZnQAJZa6_CGPgO-JjlYLv4ydfTVtH1DTK8m_q6JhVdzweq_IDdmAZsD4mh52aZXwUOsN3nFYqD04r3BluPW1nTgQPycmWLx6dJlNuOca6qO9B6Y7DF3ZQAV-lYc49Rl1lSTkn8T/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/AVvXsEhavJ-XghOre2UIOGRPk_aenAoezMiHVKl1Em3TFQhyg7zSAD5sFILfw3zqufl1d-UCqHZbKCAYWzSXvPkAIpwEvYupZWWY2PMKh1fi1pk6hKRzGb2LV2NT1YNQubRJwBkzvjhT-sh5CpdT/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/AVvXsEgN4gcWf_ruDlkh4W3SDmnVI4nx-3H1aKtDQA6BxFIlso17NqrXPj7-HF-oF4nv3Dt4fPGYd8xnm6wRUdOQsgHDTrEYzk4_GvIGxtxHSBFZoXH8m1Ij_p-qYGME7X7ABTuR-ZB3F2vBJInW/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/AVvXsEiMnEJHGCl2x9OjuMvzVI1zDfQnOhp6WyFSA2retRosoMn8P8gIh2GK9wttEvzYtFxvimg3rJF_YqXvNvB51xG8l3q8yqod_Us04NVDM7gw91U_iWJeykxEwDtO03IibBRRXAB8f2IwraYm/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:
















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/AVvXsEg8mfW-aSMCWBclstOCC0F7IwzpY1Y0wiNH05H9B-07PxBdSGNr3U6NuAnfRxJy0b4CnGwMDDWStXgVvfuD2VlVAO-Gy6XAYqXwK9COeyr0yvSbrMdIGdjpRO0U-BC-1RY_1g_x3C_EQ8fK/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/AVvXsEgwgFVOnnP_OTaiTHjfWbVwOtjVZqvHywig5PZixp4M2fgwxtObSXIyXarMMScY4GQpFK2M-hnLfj2guXdJdaSkjPhNb1NoqnprScqALP9bj9kv1AoEyS9ZNdpiTzGXeHRzjqi8rpYbZj1F/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/AVvXsEgwgFVOnnP_OTaiTHjfWbVwOtjVZqvHywig5PZixp4M2fgwxtObSXIyXarMMScY4GQpFK2M-hnLfj2guXdJdaSkjPhNb1NoqnprScqALP9bj9kv1AoEyS9ZNdpiTzGXeHRzjqi8rpYbZj1F/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/AVvXsEj4V1YBQz8l7SrHNs5BBaEetAn3iYL-ckQWxZPTHN5GHwevtb8Z1AQ_owCUpuFbpVFoYz7TAnPuacZdK2ukJWjSdGonQaOd_2J-TEqec1NumhbkZNK01kX_wonH9fRDnaZk9QBSxvJcZN5d/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/AVvXsEiXpB-bj6lh4mMR_qcuzk6KkLnKYo7uyRQaRfn_hMCHnnI_KQ0OK_yWPzbGv3ptSAzCH1s41L1mCbPmKnrrKYXoVSSKVSJy5WKu-nQUKFfNlWL2tbCDidPXBvrVlVb4b46TYQzeRz6XW8J9/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/AVvXsEiXpB-bj6lh4mMR_qcuzk6KkLnKYo7uyRQaRfn_hMCHnnI_KQ0OK_yWPzbGv3ptSAzCH1s41L1mCbPmKnrrKYXoVSSKVSJy5WKu-nQUKFfNlWL2tbCDidPXBvrVlVb4b46TYQzeRz6XW8J9/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/AVvXsEgvLth83ortpbcZ9y9kk4hOmTXzvuwcgNIy1pkpFm3Tr3x9MQpv3k-QuFzWtZq4LLuUsdqhgaSdw09JJvp55cvZKcPeT5iz3kiQ0yztvKtq_NItBT7jN7j8CSPg9sPs4J1Ke7INUXrAQu4T/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:








































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/AVvXsEhT4mCJauRGElhQKR1rHSpbiEJYPY9KjFzhQGrWHMmNrpSrhhRQD-t3LeUPfIPjjUmhCjpMnEzP3jV7F-iSvV4lgP9slI5J9CJjCkxiGYbbEjbuuSn12juQY_R5KoW5yfug6nh0EmgdV3M0/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/AVvXsEhuNcHyH2l8veHl_f0z-t5AsBE1lLnQRZ-Tt_XYAGe8KCyeBTILALJ50ExtdaPifxkL6gA2HDa2IaM3HO_wv9r6sWHR1oT7ZHt1OYv4mKHNbv1HrlXS76TFm3YR4lGSV3ERnXwOVnI8z2hB/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/AVvXsEhmKK5JaFnv6nMpEyItny07zuk689oV_iDFw7OW-v_tYzIfqFX2ufHe5FZBrlnTK5zA3iAv7Vtp-tKRa8hbah2SdREUOy6GILH4f2M8woTPvCPHCcPGGwYyZsX_zyK4yJjGkLA1g3RzOZPa/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/AVvXsEjMYE751-izKpIFRMIJetk2pBDSz4Mn0_X-Kl5ZV_8fpRIULDcXIN7Sj_zKHcVOKcsgS_f0KO7ZpK-9kcgxsTmIRdtFjIxYv5Jh5Y5CEHqfffhokS5_mFejE3Gz0CWwqN2o6vtDH19tYvp3/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/AVvXsEjA-0KvT3cagyvn-G7xoNd4knRxyQ4aYOtNJCH-XfRpVxTpWhG9GpX7Aj-YdO2KdGpxj0rbDpnr9-rv2aSQNj6cdHRthfu6g9k3OV_wEiCB4s-eIGJP4KDFRp3lzrR6nTzU2EDxLLe2a5wg/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/AVvXsEiPYYCjHQmHNmHIslBIjRVe6hyLEXhTbNt-1HG7HooflDRdXQAiZ2Yccqny8NgeXNJYxEDVff0VqXK91sA-DGSq7HLoXbRA80gOHkggPCrg3IggcxfHktfKdpMaAYu-gFuqY5YTvUx-5AOR/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/AVvXsEghErX1ByYBylgJiceGfvyRyJ4zEUW6Rjf1L0Lh0R-P1ar0QGvoySThSaZiI9eYZp2MspVB59VriXb8hnO3skfqOr9SqlJQE3bnt9yVbrerjz0qt4OPRRCxoejPFSDdce3Co_dsV9km858x/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/AVvXsEhFKiBEGuWCOp53f7TxDJmt_Mb7W1i_XfBxYJ-CDNhqq2vCP1S8ofVQMxz0ehyphenhyphen9qfNSSayKrlRTPsVs3eMUt3l7xu2FN95Lsr9S992BTLQBvLxK90ccvU0J-A_AQ5HtNrWYqrCDOgOmkvKq/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYyovlZCFgoRaugwotcAjUgOf8BMOudpRN3wDNXZNWKJUTvXjSTr8jCbIqUV3x8FuYAzASbFA2fPEccI6k2mi5oczotw9OklM7gqjSYwUuW3SQDHjf4Z56SUTZc8gR2Cii6_cuEFtlayFZ/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/AVvXsEg1HIWThKJ9Up45qD7K4R6POkKX1wFEVF4Go_0nI_3dz2VVHv2KomHZZLF3J4AY3zH88wtTMdww0wZygRiSqN8w3Fn1JUOMtV5zfB_rKn0usfjtfsLRdnPtV8vPEGCC3ZJy9C7maAWkqQwy/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/AVvXsEiX-V7Tjk6N9AevWVVck2ovNTpmy5jMoYU96HW0bLYJD2P4yZIqG454oVknB5KP7mP0yqiZelbyHheV-bll2kvodiz_7xmC-r2BYPy6N21fEGpZMDZPHV4v3-ZtFfayTFtFkcymW3GJe_Zs/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/AVvXsEi4Av7GnMT-YEuK944vmLC-nJSINHpC9EVKOPM3ArtSBd4JrczmxXnTUIrZzR8qH8EWr8NzdcEPw05SAp5EF26wslk9ne8X10RSfLcUH3Me479SUMLKpzuqfkEBB2Ycqfr0mU9CpkQfJD7C/s1600/content_bottom.png) no-repeat;

height: 13px;

float: left;

}








4. Blue Center Drop Bar 







HTML CODE:















































CSS CODE:
.nav {

height:35px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp1lwU2If1yf2plXvCMlbWaJMRA5jR1YnLLUTLCZyYnJm46XuSI-LIJCCHf7k-xGAFao8JLsYxaxQF1Skpkpg8NJ3Tl-uOqFWL_be4dFC7rs2vSn3YF-dduqJHL3ubesxn1sAXN0swXmPl/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/AVvXsEgp1lwU2If1yf2plXvCMlbWaJMRA5jR1YnLLUTLCZyYnJm46XuSI-LIJCCHf7k-xGAFao8JLsYxaxQF1Skpkpg8NJ3Tl-uOqFWL_be4dFC7rs2vSn3YF-dduqJHL3ubesxn1sAXN0swXmPl/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/AVvXsEjotUb7M3P5RQl7oKHIv6pu615S7PNdx8YJPNc82hqjp-uxCP0gTfoUmie44DfdhPimjqzaE1T6n9D219p5H4P-OfM7O1m1mUTb6-5o-hp1QaeB2FzhGFr-nAFOTS5iLdlYC7D19by0yPE7/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/AVvXsEjotUb7M3P5RQl7oKHIv6pu615S7PNdx8YJPNc82hqjp-uxCP0gTfoUmie44DfdhPimjqzaE1T6n9D219p5H4P-OfM7O1m1mUTb6-5o-hp1QaeB2FzhGFr-nAFOTS5iLdlYC7D19by0yPE7/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/AVvXsEiBYC98Bi5EZufQOVA_n7kG4Z2WYFKlc2-ewpIx7ehC3YAYUPxzwrW00ySx8hu71hXWZGlsk-2Ff7XYySSCHwLumfE0ZQTXPOgM00ACL9_Sv-iVhFcl85Hgk8QISrFDtg6pZphCibvnZBJA/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: 








CSS CODE:


.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3tpfApsszIdmJOHFGGcQ9CICn0zvOIiB2wlCyeSWKDJODz2Qr6Jq8JaisS6ap0fvYbBjEBuuZdbldtb8hDjnax9hObCM0a6gHAZwK-twdN14bfWNvwia7pmpXrTeHW1h6EFP-x-5YiT_/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/AVvXsEhBfIVKMobtoh0Ti5c7yhomqlM-amhyRj3fpr8OwXcIqa8ocUqcimpUAL28rLnZ2ICPcuQOx0TpbwqufU1IbzEZNfhuhy8luR_uKP1cPLUxJwFIWCLReUBVqVKzcIhFZL4z4SMTcAdAvrkl/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/AVvXsEiaJtsWBZ5GbowuqW2Gaxv8_LmP-8LLPHnHxOO4HSfR5EfmhTRO3PBfqRw-AOWZHcz1h15-eV4NlahK7chrAOFT4nsoKKBM_3Fz98PCrUCy18LV6F_oYAp5cdKGm9i61l9BRTXEz0RklLWv/s1600/down.gif) no-repeat right top;}

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

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

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



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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJLv7iv4WtE-oirW98kC3R9DgjvV3AYNGy8uMRV4u8cIMXH3UYlvttpJyHY_UjOTzpHDsb8LlJgtEwYunhQu7CV8CFNDxhPP7GvBW3rjRa7dd5BjQmPhxnoCh7FDXjHYeZJjlT7Hdwumy/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/AVvXsEjtSMsI8JmvxFtKXi0S-eWkPJQ64dmyyv_7yKd4HJ8Stm5lsOYIPY1ynDlrld5qja60w8ZSnxJUOI9Vtyxwok7iQyVPuMRRzXB777pJCWpSdw8MoLTM8TSxn9XhN-ET7qr50-R4YQlUTPZB/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/AVvXsEgbOLD7dUt4zm4kaM_3WKvL5PpPfMLNMsOi4XFoeYwLyYGWurqt81z4ae66unO2J8FlP2o8PhA0BFOueOT8D9QpxLeJx7uIYDVj1Y0X1CKyoUBap5fH1P2PA1PbJ1brzZ5HoGRCgF5TOigJ/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/AVvXsEgbOLD7dUt4zm4kaM_3WKvL5PpPfMLNMsOi4XFoeYwLyYGWurqt81z4ae66unO2J8FlP2o8PhA0BFOueOT8D9QpxLeJx7uIYDVj1Y0X1CKyoUBap5fH1P2PA1PbJ1brzZ5HoGRCgF5TOigJ/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:

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9axfreiptEgYYKR0ubDbszccdOi1jlWoYq8_gwmLGOrxqu0UNY5AHhgjgf8yg1y2aVrQ8gGa0XIULuep4wbdYPFkMDklm1uGegr2YbxIokfTF41BOKB-78xRdY3eay9cTjFJf9EJGzZy/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/AVvXsEimFmNJCao3KgT4BSp7m4J8b8N0dkOHppXP3BpjzVOqEDSDTMGVamXkVGsL_CYNWlwueIvlLuFl6-Kurh9zaMAabvN3g4M6ze_x7hoH5PbYX9hquObvhM5yVuH6FuTarfztxZgOx4L9gNVU/s1600/down.gif) no-repeat right top;}

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

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

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



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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHpt-c5B_1EsBH4SHJA0LL2GM0B3Tr0N19fJBKv81YQ6wxtJPQ265eFMCnnZSzrDMXcjJEbzWPTLeNB-hqjFtMwhbxaT472k7rxZuH9iFrGP_bOlD1m1mIHbiK7RHvkD838iy6le3AKbe-/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/AVvXsEhvm9AJdMqIkpERXoCvoNtDYpK7U5R055q8J2VLjWpDHJpR2AxC5Rpaf27yvLv9ropF2tm1yPLj2XDWgTO756-P4qccdBXjy1Qst1Ag3Vok61WIWgSRXc3Eir8417aybGUuzC0IJgaLBxWi/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/AVvXsEjuGBR1zv2QDDhc39APTUWCkCQLAVO42jPXtO1200d_ib4OrPqdJXft5Z1vLvIEig2FBChPtZCgW6ECHjBc_tOIuRxaM7GHr7g6efMEjM5YTYkPlYtXGpydYMxuR4EjfBxrxBoup_wWlP7C/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/AVvXsEjuGBR1zv2QDDhc39APTUWCkCQLAVO42jPXtO1200d_ib4OrPqdJXft5Z1vLvIEig2FBChPtZCgW6ECHjBc_tOIuRxaM7GHr7g6efMEjM5YTYkPlYtXGpydYMxuR4EjfBxrxBoup_wWlP7C/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/AVvXsEgkGmQHFtVe-igPVtRcvVJLXD64FDKMHKAm0bTrwX937jkJqalzKnVpsfVGJt5BT_VTwrsSFWkl3STKAho6GJunUq0tCMBze9Ro5UsjGT0W71_cUs26lf9gX4yuqiteroTp9d2Hle-BHtru/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/AVvXsEgkdOwgqvuRfse_X0F8B895rwDer8AHN7NAkjoDIMzXLIq9jMX8rUVfXI6Op3AOTN8X9p4CwCUoB63KbpPyuwxrhFm5XdMZOUmlOfgq7ZkSuVEXQrxuWVgUlr0gLxx8eada4Pra49TKKOqg/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/AVvXsEjclUeJWMWH31hnbrTnJDdznJUbO6sWCt_-9by1T3NpJSbW3x50QcNiU8U_DTyvP2NKuPZlcqA2KB-5AdgQWxgCF-6OMKx8dh1vrsy4kD_hKGgmqDVMMlmq5lCJKPERZrfeFkZv7vpiAAmD/s1600/down.gif) no-repeat right top;}

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

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

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



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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifMowGMU8TujGr5ZOXt_YeeAG0ZaKTEqSfrgA5nZFmRqgcm1naxP7efl4_TVN8duxLREa9fEbYtAqWzUZ9yKpSLqq2LWaf71QOUxlZ-pyFByrDPjqQaSKsyJvZetTz8AsRMMe8It_ceGkG/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/AVvXsEgmd3Y8gnOWEEU945UQQTrENoJj6zNqbnScqYGYMXnjJXZLXlBu0V-EdH2JiVKE1apZJCryqlY8hOWZVcBUCINZPpf4FlufBZPnTwozedCTW1BA4zCp4lR3Ir84zHZ9649uCwh_c-Nuo6w8/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/AVvXsEhhpR9tfMvkqZ81aJtWnWRk6cHg8_2JqDOzy1p9OZcOudPvwlnD6f9zQYO3M06TRi53hzgLrXHZTiaxBdTPfhcUOtcsOBfBlnPG6ZDF2PGEKskY9oLp6hCowchXdunDOzwfFWOFh5NlBjwn/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/AVvXsEhhpR9tfMvkqZ81aJtWnWRk6cHg8_2JqDOzy1p9OZcOudPvwlnD6f9zQYO3M06TRi53hzgLrXHZTiaxBdTPfhcUOtcsOBfBlnPG6ZDF2PGEKskY9oLp6hCowchXdunDOzwfFWOFh5NlBjwn/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

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

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

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

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








8. Blue Tabbed Drop Down 





HTML CODE:











CSS CODE:
.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJrdreWsBkLHOPCJ-zkRUqK0nWxpcCTl45nD8EVrP6PuTdDRqOxiqs7MJ9KGhdaP91Kb-4XlKlNccRNkE2kXoUAGXXnEG_2adTVasqsgfM-MUSfaZPvjhjAc_w2z6mtBGqcUs67YFDKhJ2/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/AVvXsEgW9OORfy5s5QGbQm6uYen7rqeV2ZWxFQsYh8_OlfoHQeRKCupALNgizLVqyUBhPMOrfEalumri_OIOH-FmLK2JyTLRaB_jjPs5i5Dcz0ycboDz-W9PC2wXYxMLAeMcvXYP0W8yvjPf871B/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/AVvXsEisgRSjkp3aMiYHmIM0UWIs3azFWBDcOyGsRjibudNZaxIq_WDCQ70rJpGMbLAXuWgTbB3X1rDEW69LBsuvoCAYvYPE8Ub8HMTVK4RyI6DHkkRumc9-GbC-xj8gpv1ZCbAPP05gDUiDj7nD/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/AVvXsEiNa5oGVlcFtbOKVLaC5Pvty5k0JQcjy0pxzvk5E2IWJEgboDBFyQq3UIiUIdK5RbxZO7YxiTs_rq5xC3XXTWAC9JwmAbFMzUcHc3MRQkSVi7Yl3p1riQVPCN3WtyeX45etlvOj_kH2jXoR/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/AVvXsEjcNUEMnasY_d27u9n5Hg3GIFJQls7k3v8r4kI1Gv6mvu2DGVYF2FJL-BSvkn7HR7L9b3gO5LKkfpOG2kIQ9IzKVjqNKoH4UDw7fBbBJpXc1XmJXvaQzbPGdj1weSjbHTp-dPeeWT0Zdqck/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/AVvXsEglLZG_rOd9ImMnizXJQ7nOGXXPiZLsKsNtRSHIMbD-6VDHiH7VemAfZUdT2oaPAyI6HADmZBrhrRaUyc0FhOlorZOhbRbfNS9BX9f15ZNNetNHPAu8_V3ccQGFo6Mol8y3IIwBgnzS14h7/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/AVvXsEgHhh_z8VnYHq5wEWadO1P4cX32S-E3ay1SPEjoohWwETWXF8taEls28U-DgPSWwdnZR_v4KVqXiGXl6JqR44h3gFgDdfGaG3Wri0r4YSfBXbO7LOyxM9EJnm3pWnVzqyUDm1GI9IUt9-Dv/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/AVvXsEg1Dt918qcJfxM2St1vsjDTfZeYCFR41SycLVyq1ll-MxdQaXQSFGGozSyATE8n58tFmFWiv4uPixLrGy0RKG9hVpaCeOZIMsLQMdOl77MnfSsydEQD_giA43jSrTreLlW8woAazuzGhFQr/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/AVvXsEhK5c5qqPQeqNFc4sbMO6uvXYAIbFfUxyhB7xZNdSoXPDQC88it9Si_zEqv9pM7T5XoG6plcUvUtBDqYPr_AW0m_ubh1xNSLTp9LzVkXqMqEQsk0oOZ5i8nxEcCpi0fbu4mdPrgAAfcjhra/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/AVvXsEiYUwV48i9LGY_XJJdHYZMFdrrPaAX4plzp5sOGXANSA1oGk9wq6YbGywOlRchZTBSv6dUz2kCVo7oy0wZO6cazRBnEYNwKOAh967KgGrKsHLw6smxBy1zFLkRLEM81Fsu_iz0eXIpvFa3J/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/AVvXsEhUbpfWbHr7LVTaJD2hApfT6VafPozOx7kctFU1DB1VLDFuInyT_KSNWr0fdEjRpwcT_fiJAYLkudOZln0okTCVRXRZc3RCqLAqQopVr_Ghmm71EOFMsO_OL2xEXLcjfkU7EY8Tx_P9yuqj/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/AVvXsEj9zzkNDVoXntFAThCSzlDWzNq3AarQRzOdQJlJxKVjWnCGnSSLQwU8vUht5_Gvp8fD18xQD9Khe6Ka_CJTGgNvi5jqivJdo95u2YDO-A2oS5P-bWipyOkCQ0VnstMCA2vCO1xURRhBYzmm/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}







14. Simple Red Drop Down Menus 







HTML CODE:







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:
div#container

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



h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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



ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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



ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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



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

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

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

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

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

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

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



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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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







16. Simple Blue Drop Down Menus 







HTML CODE:







CSS CODE:
div#container

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



h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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



ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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



ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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



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

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

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

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

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

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

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



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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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







17. Simple Green Drop Down Menus 







HTML CODE






CSS CODE:
div#container

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



h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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



ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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



ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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



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

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

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

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

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

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

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



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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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






















Select Any one menu from the above given list





How To Add Drop Down Menu Widget To Blogger


1. Go To Blogger > Design

2. Click Add a Gadget or Add a Page element

3. Choose HTML/JavaScript widget

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

5. Hit Save

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




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








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






    • How to Add CSS for Menu:-



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





    - Find this type of code ]]> and just before paste this CSS Code:

    .menu{

    border:none;

    border:0px;

    margin:0px;

    padding:0px;

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

    font-size:14px;

    font-weight:bold;

    }

    .menu ul{

    background:#333333;

    height:35px;

    list-style:none;

    margin:0;

    padding:0;

    }

    .menu li{

    float:left;

    padding:0px;

    }

    .menu li a{

    background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGNe9PvZnQAJZa6_CGPgO-JjlYLv4ydfTVtH1DTK8m_q6JhVdzweq_IDdmAZsD4mh52aZXwUOsN3nFYqD04r3BluPW1nTgQPycmWLx6dJlNuOca6qO9B6Y7DF3ZQAV-lYc49Rl1lSTkn8T/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/AVvXsEhavJ-XghOre2UIOGRPk_aenAoezMiHVKl1Em3TFQhyg7zSAD5sFILfw3zqufl1d-UCqHZbKCAYWzSXvPkAIpwEvYupZWWY2PMKh1fi1pk6hKRzGb2LV2NT1YNQubRJwBkzvjhT-sh5CpdT/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/AVvXsEgN4gcWf_ruDlkh4W3SDmnVI4nx-3H1aKtDQA6BxFIlso17NqrXPj7-HF-oF4nv3Dt4fPGYd8xnm6wRUdOQsgHDTrEYzk4_GvIGxtxHSBFZoXH8m1Ij_p-qYGME7X7ABTuR-ZB3F2vBJInW/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/AVvXsEiMnEJHGCl2x9OjuMvzVI1zDfQnOhp6WyFSA2retRosoMn8P8gIh2GK9wttEvzYtFxvimg3rJF_YqXvNvB51xG8l3q8yqod_Us04NVDM7gw91U_iWJeykxEwDtO03IibBRRXAB8f2IwraYm/s1600/hover_sub.gif') center left no-repeat;

    border:0px;

    color:#ffffff;

    text-decoration:none;

    }

    .menu p{

    clear:left;

    }





    Now Click Save Template





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










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






    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)
    Best Blogger Gadgets