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 ]]>
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 insideHTML/JavaScript widget and Click Save.
Here's the code 17+ Drop Down Menu
1. Massive Blue Drop Down menu
HTML CODE:
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
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("http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZSeQYKQI/AAAAAAAAAGU/0AgHYW2zktQ/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("http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsZNT36uyI/AAAAAAAAAGM/F8t08m7-5tw/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('http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsZUcZYwkI/AAAAAAAAAGY/zNSlkfCsai8/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('http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsZPiSwCMI/AAAAAAAAAGQ/VBSL8auDxzc/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
SoftwarePlus
MagicDriver
GreatFX
SampleSoft
UnDoIt
100% CSS Menu
With Cross-Browser
Dropdowns
Absolutely NO Javascript
Being Used On
These Menus
Example Of a Divider
With No Title
Quality
SoftwarePlus
MagicDriver
GreatFX
SampleSoft
UnDoIt
100% CSS Menu
With Cross-Browser
Dropdowns
Absolutely NO Javascript
Being Used On
These Menus
Example Of a Divider
With No Title
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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJNaPc62I/AAAAAAAAAKs/2BmTvxN4wyk/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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJCLgoSeI/AAAAAAAAAKU/FhQy3kYe0gY/s1600/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJCLgoSeI/AAAAAAAAAKU/FhQy3kYe0gY/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(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQtJG25BI4I/AAAAAAAAAKg/iHBVUZh_3gk/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(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJFWzovvI/AAAAAAAAAKc/Tkea8FvVTN4/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(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJFWzovvI/AAAAAAAAAKc/Tkea8FvVTN4/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(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJJ7mPTAI/AAAAAAAAAKo/TjeE_jkB_rs/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:
Home
Blog
Archives
Categories
Top-rated Posts
Most-viewed Entries
Development
Wordpress Themes
Wordpress Plugins
Mac OS X
Tutorials
Photoshop
Illustrator
Css, Html
Post Your Tutorial!
Gallery
Personal Photos
My Friends
Tech
Portfolio
My Works
Contact
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(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmFxQxnOI/AAAAAAAAAHo/WeNb4h2lTcY/s1600/nav_bg.png) repeat-x;
float: left;
}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmHgvXrfI/AAAAAAAAAHs/0C36haanf_o/s1600/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 41px;
}
.nav-right {
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmIzag1WI/AAAAAAAAAHw/qNqgaojq4OI/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(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmP8wgFmI/AAAAAAAAAIA/wdf4DZhsFKg/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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsl3yDJRkI/AAAAAAAAAHQ/hZkoiBamxso/s1600/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-mid {
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsl7c8ppBI/AAAAAAAAAHY/hxR8ObxBYmo/s1600/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-right {
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmCJ3D5iI/AAAAAAAAAHg/0y7-Wpz4C2o/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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmUJr-yhI/AAAAAAAAAIM/OihvjAeTyG8/s1600/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmRpDHDsI/AAAAAAAAAIE/ADndeR5TGu8/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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmS3dJfYI/AAAAAAAAAII/h8j3-QE6ElE/s1600/submenu_bottom.png) no-repeat;
width: 205px;
height: 9px;
overflow: hidden;
clear: both;
}
.content {
width: 670px;
background: transparent url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQslwVgdWcI/AAAAAAAAAHA/hPtWaiguCKQ/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(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQslyLtUh4I/AAAAAAAAAHE/KjmSaXhHWuw/s1600/content_bottom.png) no-repeat;
height: 13px;
float: left;
}
4. Blue Center Drop Bar
HTML CODE:
Sample
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu 2
Sample Menu 2
Sample Menu 2
Sample Menu 2
Sample Menu 2
Sample Menu
Sample Menu 3
Sample Menu 3
Sample Menu 3
Sample Menu 3
Sample Menu 3
Sample Menu
Sample Menu 4
Sample Menu 4
Sample Menu 4
Sample Menu 4
Sample Menu 4
CSS CODE:
.nav {
height:35px;
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQspKEXsD1I/AAAAAAAAAIU/XP4RobAgtGk/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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQspKEXsD1I/AAAAAAAAAIU/XP4RobAgtGk/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(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQspLavFDgI/AAAAAAAAAIY/zrZHi0-MtYY/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(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQspLavFDgI/AAAAAAAAAIY/zrZHi0-MtYY/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(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQspIwXKEeI/AAAAAAAAAIQ/bJfrojOh8GE/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:
Sample Menu
Sample Menu This is some longer text
Sample Menu This is some longer text
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu This is some longer text
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
CSS CODE:
.bg {background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsqYv9n9TI/AAAAAAAAAIk/oiiHv79iBCk/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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsqd0O5eNI/AAAAAAAAAIw/qhsKMaaJL20/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqbaw12UI/AAAAAAAAAIs/u7l_QWB3Ruc/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqbaw12UI/AAAAAAAAAIs/u7l_QWB3Ruc/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(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsqVzs-dBI/AAAAAAAAAIc/nCJLoz72b2Q/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(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqXRNVRmI/AAAAAAAAAIg/d_73a7oZpH4/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#95d2ee url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqXRNVRmI/AAAAAAAAAIg/d_73a7oZpH4/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:
Sample Menu
Sample Menu This is some longer text
Sample Menu This is some longer text
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu This is some longer text
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
CSS CODE:
.bg {background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQstCprwulI/AAAAAAAAAI8/SPMsyPHibmk/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(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQstHWj4QOI/AAAAAAAAAJI/0EP4r653Y3U/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQstFxKLtQI/AAAAAAAAAJE/AaclOFJ20kI/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQstEUoZw_I/AAAAAAAAAJA/mg9GEpmWjVI/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQstFxKLtQI/AAAAAAAAAJE/AaclOFJ20kI/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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQss_-g_XhI/AAAAAAAAAI0/2X1cr1UjJJk/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(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQstA0Fq5gI/AAAAAAAAAI4/iixY27DoBEI/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#42c555 url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQstA0Fq5gI/AAAAAAAAAI4/iixY27DoBEI/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:
Sample Menu
Sample Menu This is some longer text
Sample Menu This is some longer text
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu This is some longer text
Sample Menu
Sample Menu
Sample Menu
Sample Menu
Sample Menu
CSS CODE:
.bg {background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsvw7MKOQI/AAAAAAAAAJU/w8DkeVrGAvU/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(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsv4SuYGyI/AAAAAAAAAJg/wmJM2Itng54/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsv0jR1qyI/AAAAAAAAAJc/y7dEWaJx5ZQ/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvyjqtOtI/AAAAAAAAAJY/vmyqY9B2D9A/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsv0jR1qyI/AAAAAAAAAJc/y7dEWaJx5ZQ/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(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsvpPMSx4I/AAAAAAAAAJM/je9EQ9t8kZI/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(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsvq5mWSrI/AAAAAAAAAJQ/CqfByxNrLWU/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover