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

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

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/AVvXsEhJtwJfjNpn-xMyYVpDZHVJqhPdY15eZUtysEeI1VMunYSb2UV5QyqpzV2IFrANJ_eFrxfUlpVyZDjPIs3Oj5FqRuunDXvymv8nl6rRRz1OUDhAY3loMuVFDGczX-e_aSgWLH9_7z86ETxa/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/AVvXsEhv85zEG8O-1LMIhvoVDZ9hrcgd0uusYJ6DoISHwbI_UvhTrSFmd-QTt_Jl0Ypv5erBcKq9klSSssxUIOnnddTs6W3K0oQE_wC5-jAQgJ2J2AUSsoI_x2oT7TQkbYtZh8Gwsm247PPztfZA/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/AVvXsEiBNeiTVp0vT5beyLtkB6iMURFWeyaLr8PXVM-PBqqTesooWE5f3FqljLhOnX_cT9nIJQQkRO9Esrlb-JpNhZ8-2X4zwUc_gJYZkr9cA_DpnV8NA3UGwYUmqdokGl3R2IchjkjM49YauDaE/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/AVvXsEjSKyfZUx2wTjyO6txsYLK6YdErTJqFU-R_Bj5MPCKtb6LKV4BxPMoUojtHJZtT_LitpH1ymod8KRvRK2MYsiMK3CtLpjNacsXMIRB8tNgmdVbVRxJl0__5UpAn6QgR2jUpPGHbbs8Vs7gH/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:

HOME

Products

Quality

Services
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title

Very Long Item
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title

Fully Flexible
- Title For Links
- These Links Still Appear
- Just Like The Others
- Even When Under A Title
- Title After Divider
- Once Again...
- These Links Still Appear
- Just Like The Others
- Even When Under A Title

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/AVvXsEiqReE5XeB_n7QClCsuAvpKdo-zVbDX2wzD3vSfUZFh3Pb3WAk5_2maoX8y6t5ZPfP0K3AgcSbQoJvuOGJZoyaPXxdDvZh1404Z5VwatwVklH9eq1PMHhFaKLPJ3ugN4RpgBGd6up-YLEgK/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/AVvXsEjRjKQCzXSsXeMLHlTm4O-B0eQCra-hD3RY0p43-pheZjTiBW399o_oa3RvYN-MGsbbqEo_FPQ8SLsDW3XH5YE9fWM2tZOfI-GonwLqFs_vHYrJ3H0lvr1vbFmJ5nhcYt6i4w2bwL9q9rAC/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/AVvXsEjRjKQCzXSsXeMLHlTm4O-B0eQCra-hD3RY0p43-pheZjTiBW399o_oa3RvYN-MGsbbqEo_FPQ8SLsDW3XH5YE9fWM2tZOfI-GonwLqFs_vHYrJ3H0lvr1vbFmJ5nhcYt6i4w2bwL9q9rAC/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/AVvXsEj5u2ncjBbqgugl-6_0mG03K4sBHqBh8du6ZnCsFIk1ggfkspsekXrBDxU1mduiPKOkm1sJ3Rbg0fGNwnsIgeSeeokYvzk6Fcw3FC83Bdheu_GYFU0d6itaTSXgHS-gqApSvIqK9AqQnlaW/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/AVvXsEjO7BLskciA_YM18iieQux_tfgYbAAJ-AQ9D7Idh5JRoJpYVzOjbbzOPs3B_dV4EUE_4bgeZ57a5BPFAXnQ4ol9dWhdCJbeNqv6OjasUAlEfIMDfl-rysI3gigFuzC2z3dbg6PUCZukichN/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/AVvXsEjO7BLskciA_YM18iieQux_tfgYbAAJ-AQ9D7Idh5JRoJpYVzOjbbzOPs3B_dV4EUE_4bgeZ57a5BPFAXnQ4ol9dWhdCJbeNqv6OjasUAlEfIMDfl-rysI3gigFuzC2z3dbg6PUCZukichN/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/AVvXsEhCbB6NaTMHgZo3SarqgDRAOfd1p2lOYys6SY2VRNSa8J6t-sTfm8TpCIZLRaAZ-qcRAkLLVuuiE_elzdxOQtwKee2ZKB04Y2j1vRFPSSq6VlUBKhvyM6ZMGjTNGiYIQdxCU10W2JzQlnND/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/AVvXsEjbiQT615ugfProJzqhVpIKRVrEI0Gp5Njzq6ptis_J9Yk-4QrKwRTu3f68fuUi_9RVC9TVwpAbqMVMisdhTyBlIu228hxavsInkU-VHJcVWKkm1IactJnC8FaT-w2FWJSdFZl4xPkY_gQ0/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/AVvXsEigcmWy4G9SBnZ3UEoG8-CCl5msBjcyZQLbx7ZK6WfrJLaqu_jVWi41-KyetKe8XoMxg6GMGB-rLYJVtxcH4N1Syr4GQsiJBXIFWf_ZrudzBPgBi8oMmyy4Y7oPPwMJd4kV1iWGx6P-vgAO/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/AVvXsEhXmnj6dkujYvBcQZD9Vq4Fmq02Uf0Vso27Gt0en2EhVfaQhct9ibwXF54BUk0bBaNSzIgSkQ_hm6b7KgcXvRakZObMCVyIwb6c74WIJKAgP3xHntdcyVLCStq_Q32IZj3hyphenhyphenRU2v0fkvsrE/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/AVvXsEiEwGBrX3a-LtIvM6VGIHWbsfgJnOqYj4V8pMFbrzxnwkOYamrF3xpTxD-ZpYAgRRvMNs0nUGvHPfKzNgBLWsgIUZokyCDMUdVY9lBqgE5Nk4ThKhTZAFtnK25ohwM5-tlwA_SnOYMX59xq/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/AVvXsEiWfECGYLqRx-nFdLDCOjA4B5lHVF4zON2sWYzKCL9hpUtRt0hPYYHwsqdJ-JSnd98g6Qe3TYaaEBiBBry-czUNo0i-Koh3Dp5Y3O9ya_XhlvrXQSPJyyXt14e_dQSu4cr7RPArTuigKfy4/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/AVvXsEj3Yfbx_XDUcSxFMEMSJJBl2m-TmMJwAqP1TveU8Tw7lASrpPMyphNdCQVPUjRSUo0c_Od920P3Yz_ka7OcEXeoqjgcMt02rPjZIoobWIu1Zf_ktNldwsU0fhs1OvLCBhgDV9PYmmGu8Twc/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/AVvXsEjaaoJFjBpRquyd53-iJSBF0OhUXZGFsNhJ9PmktzuACnG_VaoJbzp7mGKwd8riI6JQEXPNYYWOIdg93O2KiS508oDSbRtzj_F2lb4UU3aRvMd1vAvWCinwSAHfSfUajHAMgfuCfHXhK0Gf/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/AVvXsEiqVNVhIQ-DA4wW-msE9GqIK2MTKFjWu448JBySkR8XwksPwze8xjkgaJnaf-lKevTnQnfabLSx8Yklz-81DQHignxdXNCGfUjhx_s7Jg9MJAjcLnMuqQJF8PSnQgGNUiQ0adBlYElmm19r/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjglc4r8pxj1r8zNXf2fWYcxKHOT0wdTImRjpEOSavtsyunMNctbtasyTL3Lb2nWyAFvbUjb4gFQq2jASKMuN7tc-sX0SfoONfbCDOIhS213UNf1TPLtqVbPzYGIi2Z4yrk9kBaISA2fQ29/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/AVvXsEgzuCVtt6TTavQk4tm0a_6ovORrFCnLw6EijPy8ig5dMknN8R_va4uOly_IEscdhHJgbPqUd-C53qfnmmKfUniTka4oaCRS6JHT9nWxmn53kz61iMLB5aKz4ZQ2vgu4tddM4Ue0kRJlJrEx/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/AVvXsEh8MfzNsgetcUBa8YIZ9nxXTGSdDimZtpNv3gI1cpHOjec4XTqeIVzeyBralGuWs_mG1RqGdPHeFHKMRXrEd24l7h0waXIHiX6UZjPLw6eK1PN2nX8lYg7y8PcXQvSVQ0WvkrOLAqfpAMsl/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/AVvXsEhk4Sz6RMtFW8Qnq1XGgoJq7Qbub2yOtvhU3kSg4388NiugSamHKmI8dAYSCoK2ajVQLWlKolnjSgTNJA3pUG3equFW_V-2bPsLEBHDyOm6pd8HbSo1d2xIklAUWPg9_eaNiM-A7o1QLLEQ/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/AVvXsEhy9CvgqRWQbS3puop7WgtuBXlxP5ny_dJEe0BauR2U6j9sTEiTIulf7RIXhZ4ox0ykuMgzQ5TW92XnjzTFtfs2zF4NsyJ0jTECaSmRSZWWkTJtn9nR8ODXoj7X1glk7pSBMG4GYZFHrxwD/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/AVvXsEhy9CvgqRWQbS3puop7WgtuBXlxP5ny_dJEe0BauR2U6j9sTEiTIulf7RIXhZ4ox0ykuMgzQ5TW92XnjzTFtfs2zF4NsyJ0jTECaSmRSZWWkTJtn9nR8ODXoj7X1glk7pSBMG4GYZFHrxwD/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/AVvXsEgBB5reF8Yv8u_vmOJkgu-O1gZ8up6fapkNlIpUQAFlIe6aw2E1irTvR05O84ehDHFvyipiMIttQyU7YfdRQU4L9XF3jGz3muZTBo7cpznRIozre03pWhMiDTAAlnzPQUZezsWSNENsbARG/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/AVvXsEgBB5reF8Yv8u_vmOJkgu-O1gZ8up6fapkNlIpUQAFlIe6aw2E1irTvR05O84ehDHFvyipiMIttQyU7YfdRQU4L9XF3jGz3muZTBo7cpznRIozre03pWhMiDTAAlnzPQUZezsWSNENsbARG/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/AVvXsEgCZ739mK4gfl9YmZyMFOcZG0hJLKBPIra7TRlachJ_0mz58RFY1lPotsQUiLU5TGq99kjgK4zTIm1AePylRhaukj8BSt8xD9fO2zQ75iqDTvSMs4N0FSOyzOUIUtpuEXiqNvjGjuULHFsq/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/AVvXsEjVeIaSnOGOzGlCkbmo8l2waz4Ueodp8NemH3CK3UxSj8QJ_8xLL92Yaz81eP9FGHVTvE3E0-W0wwnL-WUPJWaFjqnknaZ9QGKUIVE4oLUnuSqQB-2Dw1iB0yOz05yq43qLsuz5Ly1pTill/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/AVvXsEgjCW-dhmcW9LPpDYtQvx_VLJ7YNw1toMPVEcQePhJqrGIhuVIxnbcVNZFdNL6BPdx-WyB1lnfCA2HuLUy2-xEbzDnTwy0qP4Xi3_FIx08NDJi4y5vyYJTJgOM89PucigpoB2ooaACSp59X/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/AVvXsEgDPuSdCU8tbggLG-Mzlh4ydcccJeMusdybrhlQ2VLXn1g-l8VYPUsO3Gln2ro0hSZAoc0h9HCFUiJgKNosKp3Mfyzg6_Pu9XF3VlBbJTNHPjl3AgaDbhOczWGLYrSiP0BURDe5ymekJinh/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYRZKIjdCzg3JQbo12zPcaSuq8ulDm6t6h_Z3e2SflPC0Fs-A9CvuqxWiKi0z2ClAcq-NqxbUf7HaWm_Aj1pT4Qr-OFBhkmMspNMKhh3avkhO8wkW3OK89u3sO5Z5BZFG1vX1DUanxiPye/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/AVvXsEjx2Qxf-EOBxuR23Lg_WgzPFpY1PJi-W-d15Pg2AZbRWSd_NRDSr84D1HCOXM6bilDBL9_2M6zq7M1OXnD3Dx666MxjLR7EQGArMh5uMFKtwFbfwFnD2xgOqOZEnUYQbiw2oqNQ8KCS1RMQ/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/AVvXsEidIDKF3PFzcxH3GfXgldHq1eWGLXU8eNAOLiripAfJkT3bQeuRv3EaDqY4k4L1ZS6CTnznils_ADpRh3TWMd83FfCNsXzXx4LRQpbzk0bsyF2VQQAZYfsRcRkwSr8B1Yj5k6Hj20dE2-E3/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/AVvXsEidIDKF3PFzcxH3GfXgldHq1eWGLXU8eNAOLiripAfJkT3bQeuRv3EaDqY4k4L1ZS6CTnznils_ADpRh3TWMd83FfCNsXzXx4LRQpbzk0bsyF2VQQAZYfsRcRkwSr8B1Yj5k6Hj20dE2-E3/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/AVvXsEiUv7iMLYi7FXTZHtV7ru-aUBN18DcR2g_6MD57KtpeS-J76OSL0hH86eh2nON7cd2o5UoMtK7EmhvieVEOMsUfcVu_BQ7ZJquJrWKgL-098MoOsR_SAips_iBbrF4dJWhKjGQBjbCDUQwX/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/AVvXsEio9NoTxy0ZXyGJUIZ0DfiX7jaw49lXv1U9CMCfJHeWiLELUmOxDgGAHkXSWCFCR_bkbYxhmqwu4ToSRoR9djUZmEHbjHvoHbU_qERZxopRVkiHeicbFBrdKTKN5rPPGhCw1GLP1XU72r67/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/AVvXsEgaiNU9tHtjBq1aWrKKxndmJpJ5wRMPYYC5lfA_2YTwgjf0WDuKLxAhFkN_vKQpCfYHS4KH_Mc14f43NOK313za_MsIfV6pjO0DQ-Rg02Di2FoQGoHJanfd2C6L5sFuZRVT-v-lUZSaQ6no/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNS7b4x3O7P4Xw5_jED2PhxsoPRSv_cFJOLmF-9BeeSjlB1BhjSqPlbfT040fZdAEhd9E2Xb_dRUq7X-h8AwHB6_ET5EDllWvfLPFbYKCAJNrXLvzUli13xI6J2EtdBOw8I0_LoqnRZ5IY/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/AVvXsEiPLPaY6lyyXhNZHuSqyjU-uDpyfZgPgpNLAs86H88MvK3h-HVcsFYa0O6vSf5pFPON45cpbCjcP22_sQMbgHP_4UMkKiMIAwYh_PtvTrLj6ER74rbDWlIUu2wm4jWCkw9JHJHp8-UrgxUR/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/AVvXsEhJtMA4m9cliVkKz_C8bWoHmNaTjE1I6Zofmgqj_wci6EIhkQcmx9TRSmLMbXRo1DNnT_Y5bgENT2wKMwQrb5rh1vHI3SiYJtiI_kSPzzqSVBo8roqahx_1WxXVnxGJFlaZT4iA0NTGAsDo/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/AVvXsEhJtMA4m9cliVkKz_C8bWoHmNaTjE1I6Zofmgqj_wci6EIhkQcmx9TRSmLMbXRo1DNnT_Y5bgENT2wKMwQrb5rh1vHI3SiYJtiI_kSPzzqSVBo8roqahx_1WxXVnxGJFlaZT4iA0NTGAsDo/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/AVvXsEjV2JP5EA0JN2mvuTcxvX0_E_goSOvE0xrQtTzZqH7yxe6xyyeyRMXqcykCcRXhmD8okrRfxwxGw1wDxlGCdRvsKVMwmrhqO4QfsQXnz0SX8wvjwDLUf57nGm3-qAqze-fC3VK22XtC-3a-/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/AVvXsEheMgEdXREUc06z3WPWhchDQWXiT3MU2mxxG-DN8R_oAbLQkde8dOnqxqh6yWIBJTFFQjXaAT88bkuoQC-6oWBtMQpPA0sEENMZ1NwOWAKvjoSyP-JWFDE8rrG6oNhatqw9IHqj3WKOPwMg/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/AVvXsEjQZJZdpmZ9ablcU79b7GZGAbsHdn0xZ0tUsQEsdrod8yGHUjr6-oPIfujRDc2WSBSKkqDuJ4H5H7kJv4eP0MPJcwafmaRCfwlDXlM1W6CioPNR-A0dE3AqYdUuoDPNodcc5SKECNVx8pJa/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwcDL89wpF1dQjPlXjXRCSEvLPOoaghxlEVCkQy_vJ0juHrtpSQjeyfzCnfTAbSmH5c7b27pF0S7hIxTc4vfN_w8M_alw4wx_0zeTu7l7dFZCd3MzKqOmo0xut_rm25c7CKin5PMoa74OC/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/AVvXsEiY1eVaCiN-hCA3Zds5Sn8-IzezdOhCKVvZ5mvPtOrYUoL5rz_EdNBx5Qh3j-RM2sBgrTof-53mHS7K-sAfk_9DodElhPo0N5CO7F19PZwFKqw1h8BJU3_45q0wbcmtoOYflM4RUx3WyntG/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/AVvXsEi4X1k-0BraeiPSFVNAn7GYXHqaxk6ubmL6CRduCkChhT7qWnF7pBk-yn5P6xLKcW26bd9HisL_F_urJR79hDXZe830KXafZ-h3MFxsqK9E1AbLXd7fSzDnQQilm13pfZuj_dZd6s60thEZ/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/AVvXsEi4X1k-0BraeiPSFVNAn7GYXHqaxk6ubmL6CRduCkChhT7qWnF7pBk-yn5P6xLKcW26bd9HisL_F_urJR79hDXZe830KXafZ-h3MFxsqK9E1AbLXd7fSzDnQQilm13pfZuj_dZd6s60thEZ/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/AVvXsEjQgDx-fItevXlxaXjQ7ltF3j_kUjrzmbhg2S40U7fHuXlFCa_OmiflJwabaBMVUnqum4r9Fi1Sd0p3TfqOGFkf8XzqWCeXD6o9YAKhEUl1fs51fsTBRSocrpMtzohogD1C-PjntCreHCzi/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/AVvXsEg8TEMgmj2tnjMiV1db6i3Q8qr2gRcRDOtzJG7fvqREu1u4dVoZWajBQLFYMGYGeApINv1BlhX7_YnpUJbDu9PwF5YNEtborbngS0SeawQs9IEUj4CZokYvH0zQlhhc5jabYTlRy4j0Ifus/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/AVvXsEi3BdokEiUtja3ADO4RFbYI0dRCBu2RdfUyAbtwKs0hZoDZ2kAogcCTOsInZl_vBQWZV8U67K8WXvN8ShnRLGOUEc3w_eg190JrJIXJbNDoc4ZGMyHRbVrLkHd6Qjo8kSmF8cJlbmpsgsjg/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/AVvXsEj08_kRiONjYW6osORTpDEj8Hlo5wGieIGEU33Y2NGTv5SLyD94dPWCwul3ZjSs1bVI509jq5rNnD6EyLnHBglT9bbb4qLUdv_dTpvlADrLl-yUMBwct5R3rxpRK_BSZ_qhEBMl0uOhjxSp/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/AVvXsEh2M0E4bb9dfirWj6ec0KZ_3YfAHOL68Xs39RG6JjvAIZVqJfdc6PpfPUEhAhaz6RxsKoLRSJr5ftDgQGqaof0-J_4NRWduQIvbE3Dyblj3uoFWwfNQX15cRwJegj78qTh_HF4mND0WLmD5/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/AVvXsEh5U60R6E06Hhmoo0ewb8AWCGwqbGKVyavfMrVJWPVbA0SLJ_icEizWAAlSxDjy_KxMzIDPDTDkK6das3caAwMqnOFDd-Oj2XKAEIqc3wZbreI2quBUa4WenfquNVq7VUUZlQTqmcSXhrBp/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/AVvXsEjlE-PTEme2cmUZbCmVcw39OWqKZqN9VteF7L1b992Uu4Qnl79qKgveTs_Cp_UQzF8439tZQUA3_oYoWrdaSiKMh3K6gouWxEC9ep_h2nUHSxJyEmnO461X7OvAh5fuhu5UQy9PgWPnlcZc/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/AVvXsEiDULpKOMBEphcLR_QQzxMmmOWIt3M83ttoqScNEkKCBjd7TYfxqgCKj-H46iISuKGHaSKIjjDaMcz1DtPORaiBlvR0KoIpu06XFBNiW_p436Juzj13W6UsxHIoYS0GYj95ljWS48L77X2D/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/AVvXsEiNIqq624QRNx0BUjlJVuWOmqqJgQMcrUyued_oMEMdNrFBxp60e2FX3MqkQ3ibO-f757r3XtrsLFmRbe6oPL8fvzKtirCOPNWJCm7apF-FvajJDB8lHM9Yoq1DJCWJejTP4UlGnGg4UWV7/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/AVvXsEgwW6WpQg30KqsZYHMk4bqtkseUWaNHC9uOYp9E-lMOqK9PY_4tbNKUZhMXa3VJL6Tu-a_kOpFWxBe0yGZIi4utS16OAsQZgslpY7yAYkl1_jiqukomG-ae4fM-UscsMhj1u4eTscWjfQlV/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/AVvXsEhmxsbemCMa_cEsrPk9s-wVZ6J83Lm1-pJZS82YRR5GW1bxIajGv2qTZgjEXXYgdCU_4wPmHFkxhRZGGdIPOSGZE179-0ZyroFltL-046hxlzpMyyDUqUeHTyeiptVgzDwoAeCalk9nF_m6/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/AVvXsEgql8yBSoY7ZYzSaOHVCN3BFLdDGUpz4rXPvu4Ex12VPzsObpH289s-lYO3FhCueIJyHB5-QlaEgo7DnJ16k8UHreTM9vXX-cWNWrVOOeIY945__4iL1PvYdXjsuhglC5EGGJdIZlwFMKrQ/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:

16. Simple Blue Drop Down Menus

HTML CODE:

CSS CODE:

17. Simple Green Drop Down Menus

HTML CODE:

CSS CODE:

Select Any one menu from the above given list

How To Add Drop Down Menu Widget To Blogger

1. Go To Blogger > Design

2. Click Add a Gadget or Add a Page element

3. Choose HTML/JavaScript widget

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

5. Hit Save

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

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










Home




Products







Drop Down CSS Menus




Horizontal CSS Menus




Vertical CSS Menus




Dreamweaver Menus














FAQ







Drop Down CSS Menus




Horizontal CSS Menus




Vertical CSS Menus




Dreamweaver Menus














Contact

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:

- 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/AVvXsEhJtwJfjNpn-xMyYVpDZHVJqhPdY15eZUtysEeI1VMunYSb2UV5QyqpzV2IFrANJ_eFrxfUlpVyZDjPIs3Oj5FqRuunDXvymv8nl6rRRz1OUDhAY3loMuVFDGczX-e_aSgWLH9_7z86ETxa/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/AVvXsEhv85zEG8O-1LMIhvoVDZ9hrcgd0uusYJ6DoISHwbI_UvhTrSFmd-QTt_Jl0Ypv5erBcKq9klSSssxUIOnnddTs6W3K0oQE_wC5-jAQgJ2J2AUSsoI_x2oT7TQkbYtZh8Gwsm247PPztfZA/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/AVvXsEiBNeiTVp0vT5beyLtkB6iMURFWeyaLr8PXVM-PBqqTesooWE5f3FqljLhOnX_cT9nIJQQkRO9Esrlb-JpNhZ8-2X4zwUc_gJYZkr9cA_DpnV8NA3UGwYUmqdokGl3R2IchjkjM49YauDaE/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/AVvXsEjSKyfZUx2wTjyO6txsYLK6YdErTJqFU-R_Bj5MPCKtb6LKV4BxPMoUojtHJZtT_LitpH1ymod8KRvRK2MYsiMK3CtLpjNacsXMIRB8tNgmdVbVRxJl0__5UpAn6QgR2jUpPGHbbs8Vs7gH/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.

Super Computers