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.
1. Massive Blue Drop Down menu
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk11JkQUDQOb5WxxjDcQrr4jTjn3b8e4jWdmZ1M9Pz4PCItC5zZqTSfPpHIdQzQE4a37nUvb-qWxdKweKanPpO5Vwpdmva-A-Eta-IBRKvmmqMRvsS16EtCLgVAinmz0D-R2ibWnbqx6O4/s200/Massive+Blue+Drop+Down.png)
HTML CODE:
CSS CODE:
2. Sunrise Gloss Drop Down Menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUCvWnkbhPCjdxRI4lEKFhvCffybaMK7QrJxRzVIJi4_iviVhFmM9bUz-nGT9eKLYTAmYNPg2VlTqb74pvVRJLFESlhtqq9OPYcE3Zl8hlD_zIYAwGY02u3c24U6lVKHX58MASTKkFp1O/s200/Sunrise+Gloss.png)
HTML CODE:
CSS CODE:
3. Blue Dawn Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaeBuB9vB-wMsI6J40HLuUnPpsR-dwTcV6cd8CxbcTe9M3FPdgC1Rp-sF3QecZZt63hlC203Y4NsinN2YL3oMgeqKomRWpfqu0oX20aXEVnsghJvHeBGkZJhLDuLaBlFfTFviRzQORrCmC/s200/Blue+Dawn+Drop+Down.png)
HTML CODE:
CSS CODE:
4. Blue Center Drop Bar
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT9WqKIPgiH-u6scKiou9v0rv9eRUI_zLZbUALG0tUPqBKyoCX8AEHWvZfBuTrsyuKxGXa-nMxk8xMU8Gre1IT2nnZpq0JZ0SEjZ0V8Yoxy5-8QzfwagvzxZWFqJovXmjh_CbK1Cx1nS59/s200/Blue+Center+Drop+Bar.png)
HTML CODE:
CSS CODE:
5. Blue Impression Drop Down Menu
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVg1E2RpqYBAy6igfVLK1fcOXBvX8KIo1hOOPZFeiI6QQWHSkDqPk3_eiKc44iRpuwQfzBwQzw-h4P9ylQJpNIT0VHmDHrzCmOLkvAoG8LHrita89xkFroTPhiwZ87rLWRjDDj0gci3kK/s200/Blue+Impression+Drop+Down+Menu.png)
HTML CODE:
6. Green Impression Drop Down Menu
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AyW28IS-qnymxL4XA4vHmPYQrU3wilk6GZenRxrxwcsPg1Qdok3mlhYCNDbDi4fL2xuvnJBL8hWRerwIkMdNR24PIGLiCVqjxidud7F4G_GriWNEaUaWgdyOw0gukFnJcBWF02DhsUpT/s200/Green+Impression+Drop+Down+Menu.png)
HTML CODE:
7. Grey Impression Drop Down Menu
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErG3sVZBp-aQDLkJdoc8Y07UFlpcJbnufUEZmJwPwbfnwFnT4C1m1iJVyvLCNXYxUjz52352wyB7J5b-uZmlnDxhSZ_AiEfXl0maRJFfD_eoZQSDofRZ5nlskBsjzIO_4rEPe7y6nSWpz/s200/Grey+Impression+Drop+Down+Menu.png)
HTML CODE:
8. Blue Tabbed Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1EDJEh5XPiQCA0qznKBsdrOzoAIaUeygtpFZlGjCfW8KUXEieZnPF8-9sl5-nVirz90VOFdPep1fwYsOjngFa3dMGQgzIhRb_P-2xnrOtgO1FVtWNmMty1S8P0SFkWdxsdPRqp78ddKd1/s200/Blue+Tabbed+Drop+Down.png)
HTML CODE:
CSS CODE:
9. Yellow Tabbed Drop Down Menu
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Py3q_xx5njczlAkNEyMzi9usTSARbHo3YTETONzkAy_zQrOoZbS89HYoYxvDhPeAyYs10-qIj-Ne2uysVomJLBJ7XUGuAd3ezQSdGcGzvWUJG44WLy3Y7c13qJhAGzMi6PpfhZVyJ6Y0/s200/Yellow+Tabbed+Drop+Down+Menu.png)
HTML CODE:
CSS CODE:
10. Tabbed Grey Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUuORMIDKkchf3RX9Kc5w4ui9FLzLC5gLkaPpf1BRzSK9kAI3Eiklk4ypl81eY8dnTYA63vJOKXHmKa5uFqPcS4vEmq2y7NMHxOwMQKHagFf7ABbnSpBTw80iw7qyqd7XFM__K1thTVR-H/s200/Tabbed+Grey+Drop+Down.png)
HTML CODE:
CSS CODE:
11. Red Tabbed Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCyNffKRxTr1JvpZqg7FRkAH-GBI7VM7DxNEmXuA2FS98SSgogU0HazhEvM25egTHhcIMK9sfr41xpoRdeDgCA4Prs1QQnZfZiu6t94UMMee1mGpRUydYZ6dHD-nljPbIm0rKywzT7yyb/s200/Red+Tabbed+Drop+Down.png)
HTML CODE:
CSS CODE:
12. Black Tabbed Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0X8YcYF_5enPJRiLBi-_yXrleG3D1oF6QIt-_dyRrG9xnxYKUiApolsPXAhnfALULIVyKhH28ju86klRk5icWwaMoow9aWBX7aErhBDebLp1fOL0fv_sE-aTKlek-4mZCnlGmOclH2Qoa/s200/Black+Tabbed+Drop+Down.png)
HTML CODE:
CSS CODE:
13. Orange Tabbed Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpV9kUmjDFcEzK_xZcJ8Y1nqlwSIMkvHe1WVSSxZT74ujDBthhUsqDf2gDl4ljKQGslZbfhb65WsLox0Sh_ya5XmiLEJy8ShNpFFooz7_Bqao05gxtq4nFOq3OkYZ3yK3jhairwOQ2h6Hq/s200/Orange+Tabbed+Drop+Down.png)
HTML CODE:
CSS CODE:
14. Simple Red Drop Down Menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSdqpibxlxN9bgZDvAHl9kna2sNl7Nu6NXzPlGgbH1XjVzWXYGnkmG83H8Nf9hxEmJaqMndzQ2iVo6iBvp6NeC8-xWp7uCOcm4QUTfIVfQeBA3_ccSsmJITCUxjfsaGlX16Dhwt77ssVuW/s200/Simple+Red.png)
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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92HSTYtyg7i29QN0XAg2DL7yMo1_sK_HFl8uVqOcdTRMIIbEiugBYzMZQY7O9lSqTocTQU_4imWkdkXCgr5Dyaf3c8r0T2G2VMzFl1OSRMldbIfqwIR0EbPAezqjZ87EMEW0EI1lHpSBD/s200/Simple+Black.png)
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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3m58RLA8XEu1TbYSVZf3KMDrhQ8-Fk5-VD99FUDLPiTfsJpTbvIdLm3wPp2ouuRWq9ks6UQDzKYbESgplrCmY0F-b5nEpT89L5ZzhmHKWYFsUCVEID0dKlGYyUx5-Qg-_wE9fAconIem/s200/Simple+Blue.png)
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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIEy53-MbMn8z2kn-R7CONLbCoQoUx2aKDQmNs1YOik1I1-aBuRf0fITsxT83goTAt5CfUZZ4q0iYbh-wKwLTc_5z_FoaeVNupchgqZEx_hIw8ucbmY5QN9mkTs_KPwsQpuSavtvZyABnx/s200/Simple+Green.png)
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,
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,
How to Add CSS for Menu:-
- Find this type of code ]]></b:skin> and just before paste this CSS Code:
Now Click Save Template
That's Done! Hope this Post will be helpful for Blogspot Users.
UPDATE: I updated some of my posts, this post I update 35+ Drop Down Menu Widget in Blogger - Horizontal Menus With CSS & HTML Codes ..........
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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk11JkQUDQOb5WxxjDcQrr4jTjn3b8e4jWdmZ1M9Pz4PCItC5zZqTSfPpHIdQzQE4a37nUvb-qWxdKweKanPpO5Vwpdmva-A-Eta-IBRKvmmqMRvsS16EtCLgVAinmz0D-R2ibWnbqx6O4/s200/Massive+Blue+Drop+Down.png)
HTML CODE:
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
CSS CODE:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQYQWO2AgL-IfGZ_mqTAs43MEjAEnkdRgDMRngxFJZAdwEcRq9CKxMRIqIBkvMd8XWoEHcpQ2cb95d-NY4hf_fyViAp-2Ugh4Bee3hNc79sfHyNyxBBcVVYyL4IspWp0kvZmLltTrmn7Sf/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/AVvXsEiJGeXueWZ7BpNBJsCQTheQwnt0Nv_mH8Hj1LdQyf_M7tZ2uRu4h0mVSRu0wCr33RKHfzv4R-LkQHdOjVHb5skTyVcmHzRm1wTNWBgvRvkIwO66G_PvlRdswOLJhqDJueAlf6s7ID_2_ZbC/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/AVvXsEhlgdD1n8xpP89wKp-1mN8pigNyUiH_ff8SchqJWHRbdvEud9OTNA8p-Xuznjv11IbA-bzRn28v-82MLkdNFcJfQHUgYFLzOMSFR0m-cAjKLUbxy6EcDTU1YxK4s9-FgJzRjTdlz47ElFsn/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/AVvXsEhuxCcDcfeZ5ixBR_a4REZxVGc-Adg3sRacyA8tNFMt7dQ9ED6Lb0CI16pfZvhjkBGOTjjRjF6m9CXMbSoO-j50Plqwpkxr_jclMDBat3dJ7dqf9nw88gV6Jnti_lK_9LdJT6l3pChkmWQO/s1600/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
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/AVvXsEjQYQWO2AgL-IfGZ_mqTAs43MEjAEnkdRgDMRngxFJZAdwEcRq9CKxMRIqIBkvMd8XWoEHcpQ2cb95d-NY4hf_fyViAp-2Ugh4Bee3hNc79sfHyNyxBBcVVYyL4IspWp0kvZmLltTrmn7Sf/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/AVvXsEiJGeXueWZ7BpNBJsCQTheQwnt0Nv_mH8Hj1LdQyf_M7tZ2uRu4h0mVSRu0wCr33RKHfzv4R-LkQHdOjVHb5skTyVcmHzRm1wTNWBgvRvkIwO66G_PvlRdswOLJhqDJueAlf6s7ID_2_ZbC/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/AVvXsEhlgdD1n8xpP89wKp-1mN8pigNyUiH_ff8SchqJWHRbdvEud9OTNA8p-Xuznjv11IbA-bzRn28v-82MLkdNFcJfQHUgYFLzOMSFR0m-cAjKLUbxy6EcDTU1YxK4s9-FgJzRjTdlz47ElFsn/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/AVvXsEhuxCcDcfeZ5ixBR_a4REZxVGc-Adg3sRacyA8tNFMt7dQ9ED6Lb0CI16pfZvhjkBGOTjjRjF6m9CXMbSoO-j50Plqwpkxr_jclMDBat3dJ7dqf9nw88gV6Jnti_lK_9LdJT6l3pChkmWQO/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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkUCvWnkbhPCjdxRI4lEKFhvCffybaMK7QrJxRzVIJi4_iviVhFmM9bUz-nGT9eKLYTAmYNPg2VlTqb74pvVRJLFESlhtqq9OPYcE3Zl8hlD_zIYAwGY02u3c24U6lVKHX58MASTKkFp1O/s200/Sunrise+Gloss.png)
HTML CODE:
<div class="nav-container-outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcz3sZU9M1L5awY4Ihm55xCj09-_IObMVbjrrt5FGJaNSZQNPwyiMhyphenhyphenZazhdXxjww5oRG4E_IzMbKtQ-hZ5PKw3tZvQlRCNaxNz6XYqZLFeltMoD-ICgk4Cb_ErOfOUlARustyYkolJmZy/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6nhzXjCj6Wac0e0iHcIhKRU4YIo86XD1YH0XklILwt053JfTUFJlpZfoEZDKKwQ8vxZaQPv7vClnM9rQ3YThzWapWUxMQThlfo4RpsV0BUCmVMaf7oPRc2rfQ4pG1VNVoR_fuWL3ooIu5/s1600/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Products</a>
<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Quality</a>
<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Services</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Very Long Item</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Fully Flexible</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li class="clear"> </li></ul>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcz3sZU9M1L5awY4Ihm55xCj09-_IObMVbjrrt5FGJaNSZQNPwyiMhyphenhyphenZazhdXxjww5oRG4E_IzMbKtQ-hZ5PKw3tZvQlRCNaxNz6XYqZLFeltMoD-ICgk4Cb_ErOfOUlARustyYkolJmZy/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6nhzXjCj6Wac0e0iHcIhKRU4YIo86XD1YH0XklILwt053JfTUFJlpZfoEZDKKwQ8vxZaQPv7vClnM9rQ3YThzWapWUxMQThlfo4RpsV0BUCmVMaf7oPRc2rfQ4pG1VNVoR_fuWL3ooIu5/s1600/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Products</a>
<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Quality</a>
<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Services</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Very Long Item</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Fully Flexible</a>
<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li class="clear"> </li></ul>
</div>
CSS CODE:
@charset "utf-8";
/* CSS Document */
body{
padding: 25px;
}
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKA4AscYv8T3qgR6Dw1k46zxG7tQprpKMiVZNY1yK2Qb1lLALClrGOF3C3yUYrBFrX_KbavbDD-TJCj_3yJzTvH2exhyphenhyphenSKxHlGyNQWxTTapXCynUYxBBwVvah3SEhEihooUyRtd0DQE7db/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/AVvXsEiX5gvIamXH_P3Y9V56g5rG8wJqE3SN1J7xtrPQmcvgCUoIZVakaOfdRk9mrMtZlZ56_evbV7B_g2QlKHb6yOKNucEqwk7gMRf3bmnzpDaChGU-fHMkITY7RySbpzVZxU-xaDm-hA7lfiRn/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/AVvXsEiX5gvIamXH_P3Y9V56g5rG8wJqE3SN1J7xtrPQmcvgCUoIZVakaOfdRk9mrMtZlZ56_evbV7B_g2QlKHb6yOKNucEqwk7gMRf3bmnzpDaChGU-fHMkITY7RySbpzVZxU-xaDm-hA7lfiRn/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/AVvXsEjS7osL9d2VhmcZR2G7tRR7Gww2dnpDL9OWSg3CcnO2PF3R_LEIz0FIQgV3zQbObHo95a9N3NbErh0AlNfxWbI9qQ1tSKon5TnHJSqmnR9pV_d1BubEVMI0VNpBIUTw4g9pjZkngxtlfOM3/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/AVvXsEj2AccIWVb6aJzc1KdeNIrUSpTpD-EFEckDWx8FT5S20v4GXpoGW8e_Ya6l3wy6xIbVk_-fY-8q_ogz6xB3H2TiNjZspDs3fN8LB81RhQKquLqDnpMgDKwbThOt2npJAFZ2ga9YhB3Xbx59/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/AVvXsEj2AccIWVb6aJzc1KdeNIrUSpTpD-EFEckDWx8FT5S20v4GXpoGW8e_Ya6l3wy6xIbVk_-fY-8q_ogz6xB3H2TiNjZspDs3fN8LB81RhQKquLqDnpMgDKwbThOt2npJAFZ2ga9YhB3Xbx59/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/AVvXsEgFlivhE5hQHkxCXltS3QTeuMSTYolIuV26WOafFwRtHzaLbjyTby6R3jHetXGcsvAZeeuI_2X4PYRlWdeJmiNmnYGhi99uz7l96UUY_iYzin0iYmSDD0ZRmBeIcZ9i9l0J25Y2oGqdBLYo/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;
}
/* 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/AVvXsEjKA4AscYv8T3qgR6Dw1k46zxG7tQprpKMiVZNY1yK2Qb1lLALClrGOF3C3yUYrBFrX_KbavbDD-TJCj_3yJzTvH2exhyphenhyphenSKxHlGyNQWxTTapXCynUYxBBwVvah3SEhEihooUyRtd0DQE7db/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/AVvXsEiX5gvIamXH_P3Y9V56g5rG8wJqE3SN1J7xtrPQmcvgCUoIZVakaOfdRk9mrMtZlZ56_evbV7B_g2QlKHb6yOKNucEqwk7gMRf3bmnzpDaChGU-fHMkITY7RySbpzVZxU-xaDm-hA7lfiRn/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/AVvXsEiX5gvIamXH_P3Y9V56g5rG8wJqE3SN1J7xtrPQmcvgCUoIZVakaOfdRk9mrMtZlZ56_evbV7B_g2QlKHb6yOKNucEqwk7gMRf3bmnzpDaChGU-fHMkITY7RySbpzVZxU-xaDm-hA7lfiRn/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/AVvXsEjS7osL9d2VhmcZR2G7tRR7Gww2dnpDL9OWSg3CcnO2PF3R_LEIz0FIQgV3zQbObHo95a9N3NbErh0AlNfxWbI9qQ1tSKon5TnHJSqmnR9pV_d1BubEVMI0VNpBIUTw4g9pjZkngxtlfOM3/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/AVvXsEj2AccIWVb6aJzc1KdeNIrUSpTpD-EFEckDWx8FT5S20v4GXpoGW8e_Ya6l3wy6xIbVk_-fY-8q_ogz6xB3H2TiNjZspDs3fN8LB81RhQKquLqDnpMgDKwbThOt2npJAFZ2ga9YhB3Xbx59/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/AVvXsEj2AccIWVb6aJzc1KdeNIrUSpTpD-EFEckDWx8FT5S20v4GXpoGW8e_Ya6l3wy6xIbVk_-fY-8q_ogz6xB3H2TiNjZspDs3fN8LB81RhQKquLqDnpMgDKwbThOt2npJAFZ2ga9YhB3Xbx59/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/AVvXsEgFlivhE5hQHkxCXltS3QTeuMSTYolIuV26WOafFwRtHzaLbjyTby6R3jHetXGcsvAZeeuI_2X4PYRlWdeJmiNmnYGhi99uz7l96UUY_iYzin0iYmSDD0ZRmBeIcZ9i9l0J25Y2oGqdBLYo/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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaeBuB9vB-wMsI6J40HLuUnPpsR-dwTcV6cd8CxbcTe9M3FPdgC1Rp-sF3QecZZt63hlC203Y4NsinN2YL3oMgeqKomRWpfqu0oX20aXEVnsghJvHeBGkZJhLDuLaBlFfTFviRzQORrCmC/s200/Blue+Dawn+Drop+Down.png)
HTML CODE:
<div class="wrapper1">
<div class="wrapper">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation">
<li class="active">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Home</span>
<span class="menu-right"></span>
</a>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Blog</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Archives</a>
</li>
<li>
<a href="#">Categories</a>
</li>
<li>
<a href="#">Top-rated Posts</a>
</li>
<li>
<a href="#">Most-viewed Entries</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Development</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Wordpress Themes</a>
</li>
<li>
<a href="#">Wordpress Plugins</a>
</li>
<li>
<a href="#">Mac OS X</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Tutorials</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Photoshop</a>
</li>
<li>
<a href="#">Illustrator</a>
</li>
<li>
<a href="#">Css, Html</a>
</li>
<li>
<a href="#">Post Your Tutorial!</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Gallery</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Personal Photos</a>
</li>
<li>
<a href="#">My Friends</a>
</li>
<li>
<a href="#">Tech</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Portfolio</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">My Works</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="last">
<a href="">
<span class="menu-left"></span>
<span class="menu-mid">Contact</span>
<span class="menu-right"></span>
</a>
</li>
</ul>
</div>
<div class="nav-right"></div>
</div>
<div class="content">
<p> </p>
<p> </p>
</div>
<div class="content-bottom"></div>
</div>
</div>
<div class="wrapper">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation">
<li class="active">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Home</span>
<span class="menu-right"></span>
</a>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Blog</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Archives</a>
</li>
<li>
<a href="#">Categories</a>
</li>
<li>
<a href="#">Top-rated Posts</a>
</li>
<li>
<a href="#">Most-viewed Entries</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Development</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Wordpress Themes</a>
</li>
<li>
<a href="#">Wordpress Plugins</a>
</li>
<li>
<a href="#">Mac OS X</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Tutorials</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Photoshop</a>
</li>
<li>
<a href="#">Illustrator</a>
</li>
<li>
<a href="#">Css, Html</a>
</li>
<li>
<a href="#">Post Your Tutorial!</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Gallery</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Personal Photos</a>
</li>
<li>
<a href="#">My Friends</a>
</li>
<li>
<a href="#">Tech</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Portfolio</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">My Works</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="last">
<a href="">
<span class="menu-left"></span>
<span class="menu-mid">Contact</span>
<span class="menu-right"></span>
</a>
</li>
</ul>
</div>
<div class="nav-right"></div>
</div>
<div class="content">
<p> </p>
<p> </p>
</div>
<div class="content-bottom"></div>
</div>
</div>
CSS CODE:
.wrapper1{
color: #44433f;
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;
text-decoration: none;
}
.wrapper1 a:hover {
color: #09548B;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;
}
.wrapper {
/*width: 710px;*/
margin: 20px auto;
}
.nav {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_u-YW9ZIm1r-kM_lAxVFZWglbs94tbO3569vBKjDCyXv40pmB6agw5m5AYOTt28yOEojJ9xKW-S1S7SaQ6byQ1SObyXOfZlSGnvZud8aVaJR9Hv1r4Xl8ku93GOaRKR_4G9Aq0m71szRM/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/AVvXsEjGa31eD6tdHF0U-4pUP0aPjS8Dktc4Uos1eVxOIys0aPXzFOf6Ec6YiCXJc-qsRCbZx8CnOuZZAJZagWCObTuM_Fd1cffXFAjPgn2pYNqpuZ9p_OaUr1-1yhO87UHPX6K-X3rwzZt8FEaE/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/AVvXsEjmDOOH0IBGoIiTyCpepXCprkFf77YhttMUQIl3vcPRSdxxvVO7rQuS9iqDhglu_JVnCze1E0GlmHUzOm84egU1YHpOoiEjWF39J_yXhDC2zJB1k9Zuyou_dQ59ZyLgUOyrRAbdERUQSytX/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/AVvXsEj4WYm_ZinOYqph8sjQBKjoFEAsl07iI3HADLYdx8IyA17tqLlBJTdMBgsriseig1t8qlca9x61tDyZNxI2jZFhzrojPelePNU9a2Vxcq1l1oJidiFcZXmrqJPn_XDGW8enf84riPBGURE9/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/AVvXsEgTLZBVh124H3GtxIIVO6buMjCXbGYWggxxdDOqeps64nRrdHp09AchHo9UB3l1ClmbipRDfRnzCeah17uNmL_SBerydtWg5R2Nb92XR7U_XNfBONFTGprg0Ib3B4jpI9NBsmFwxOqFTrvE/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/AVvXsEhdgBepa-P5wo2_CMSPuc0rxHkFhi_pCeP_erBWk7g2wYcofUMD3hAL-DjA4s3jhu43qOXnPkjGVDkr14ZYglFY3PMFn8vWBfo6Akbv-Kt-c8IKnQY_0Od0CFnc8oVUToctds5n3SFlnRin/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/AVvXsEhk5Ds1x2FmmC4vO72Aswo0rTEv6WthyphenhyphenTC0Ul4qxEfysgiacpHlFM-J9EFVsZQ3FrmhWpNU8oKkDRSzh-o5mno0w-Zepc8cxHlnKo6CLr9WdlKW6l2mWBkLgVDX4CVKs4mOZABmsxqVXU1m/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/AVvXsEixseUNtWoZNdD-xlosNlWve04PFK7U1HjcHPrCxelyVeKWfW09Cy7gMzkt2phBNwdumvHw5NlvbCclQa5fT2WkYA9vprPwKpMIbLKw2D2WojBtBA1L4gPYKoMTQYRqFJj-wBRUeS4blLPE/s1600/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZONJYKlGLWREwemBpHcu2ntoQJVI07y_KuCdUik_rBBp9PUMcew9qhQoLarUlPmu4tJWyYNJhZQJ2azb4bY0xtiDjlldVxHMcE8FAQj9kZk7R_i9nAq1QV6y0umVLSaDK7Cgh3_L3g3th/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/AVvXsEjbsoU6IPLPhxxhPtMnZg3ipDTB-sJCoL0VripifAPtoO_KZmsj_EDwiwX0qQDjqpe5xr4qcB9TRWap5fA_qKSJ0iMOtQLjMjPmKZNog8TIgZWMrAXF50OMLMwYPC6OarEnxCiTvtoQ6_a3/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/AVvXsEiJ3IUvq3x0IjMGnuMvtXUQRoJ_ZXcx4uB-5pUxGT6JXrjx252i5V7oHjYZG9UVK0RqZ_G-SOt9I8ERv7khMegsL0k-GKDq-VQspIM1b_ZrkBQz02LKzjo8CC-4eEuLJAQearb1fIgnV7Qc/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/AVvXsEiuogT0EiHSJ3dbgaMrfPUZY66e6Cyhl6auyhe2DpKpkHGU72tuiNHG3I6Wc3C47d9QFFY6f_I2-f5bLxU4vpNJG1YVXim1zspRoQX-aCZjh9zxFyZlneW1wk-SxF4ehUmeLG-JXa_-m4Sw/s1600/content_bottom.png) no-repeat;
height: 13px;
float: left;
}
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/AVvXsEj_u-YW9ZIm1r-kM_lAxVFZWglbs94tbO3569vBKjDCyXv40pmB6agw5m5AYOTt28yOEojJ9xKW-S1S7SaQ6byQ1SObyXOfZlSGnvZud8aVaJR9Hv1r4Xl8ku93GOaRKR_4G9Aq0m71szRM/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/AVvXsEjGa31eD6tdHF0U-4pUP0aPjS8Dktc4Uos1eVxOIys0aPXzFOf6Ec6YiCXJc-qsRCbZx8CnOuZZAJZagWCObTuM_Fd1cffXFAjPgn2pYNqpuZ9p_OaUr1-1yhO87UHPX6K-X3rwzZt8FEaE/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/AVvXsEjmDOOH0IBGoIiTyCpepXCprkFf77YhttMUQIl3vcPRSdxxvVO7rQuS9iqDhglu_JVnCze1E0GlmHUzOm84egU1YHpOoiEjWF39J_yXhDC2zJB1k9Zuyou_dQ59ZyLgUOyrRAbdERUQSytX/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/AVvXsEj4WYm_ZinOYqph8sjQBKjoFEAsl07iI3HADLYdx8IyA17tqLlBJTdMBgsriseig1t8qlca9x61tDyZNxI2jZFhzrojPelePNU9a2Vxcq1l1oJidiFcZXmrqJPn_XDGW8enf84riPBGURE9/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/AVvXsEgTLZBVh124H3GtxIIVO6buMjCXbGYWggxxdDOqeps64nRrdHp09AchHo9UB3l1ClmbipRDfRnzCeah17uNmL_SBerydtWg5R2Nb92XR7U_XNfBONFTGprg0Ib3B4jpI9NBsmFwxOqFTrvE/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/AVvXsEhdgBepa-P5wo2_CMSPuc0rxHkFhi_pCeP_erBWk7g2wYcofUMD3hAL-DjA4s3jhu43qOXnPkjGVDkr14ZYglFY3PMFn8vWBfo6Akbv-Kt-c8IKnQY_0Od0CFnc8oVUToctds5n3SFlnRin/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/AVvXsEhk5Ds1x2FmmC4vO72Aswo0rTEv6WthyphenhyphenTC0Ul4qxEfysgiacpHlFM-J9EFVsZQ3FrmhWpNU8oKkDRSzh-o5mno0w-Zepc8cxHlnKo6CLr9WdlKW6l2mWBkLgVDX4CVKs4mOZABmsxqVXU1m/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/AVvXsEixseUNtWoZNdD-xlosNlWve04PFK7U1HjcHPrCxelyVeKWfW09Cy7gMzkt2phBNwdumvHw5NlvbCclQa5fT2WkYA9vprPwKpMIbLKw2D2WojBtBA1L4gPYKoMTQYRqFJj-wBRUeS4blLPE/s1600/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZONJYKlGLWREwemBpHcu2ntoQJVI07y_KuCdUik_rBBp9PUMcew9qhQoLarUlPmu4tJWyYNJhZQJ2azb4bY0xtiDjlldVxHMcE8FAQj9kZk7R_i9nAq1QV6y0umVLSaDK7Cgh3_L3g3th/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/AVvXsEjbsoU6IPLPhxxhPtMnZg3ipDTB-sJCoL0VripifAPtoO_KZmsj_EDwiwX0qQDjqpe5xr4qcB9TRWap5fA_qKSJ0iMOtQLjMjPmKZNog8TIgZWMrAXF50OMLMwYPC6OarEnxCiTvtoQ6_a3/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/AVvXsEiJ3IUvq3x0IjMGnuMvtXUQRoJ_ZXcx4uB-5pUxGT6JXrjx252i5V7oHjYZG9UVK0RqZ_G-SOt9I8ERv7khMegsL0k-GKDq-VQspIM1b_ZrkBQz02LKzjo8CC-4eEuLJAQearb1fIgnV7Qc/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/AVvXsEiuogT0EiHSJ3dbgaMrfPUZY66e6Cyhl6auyhe2DpKpkHGU72tuiNHG3I6Wc3C47d9QFFY6f_I2-f5bLxU4vpNJG1YVXim1zspRoQX-aCZjh9zxFyZlneW1wk-SxF4ehUmeLG-JXa_-m4Sw/s1600/content_bottom.png) no-repeat;
height: 13px;
float: left;
}
4. Blue Center Drop Bar
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT9WqKIPgiH-u6scKiou9v0rv9eRUI_zLZbUALG0tUPqBKyoCX8AEHWvZfBuTrsyuKxGXa-nMxk8xMU8Gre1IT2nnZpq0JZ0SEjZ0V8Yoxy5-8QzfwagvzxZWFqJovXmjh_CbK1Cx1nS59/s200/Blue+Center+Drop+Bar.png)
HTML CODE:
<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br />
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br />
CSS CODE:
.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjN_Qjybk_EigaE652wXE-kCNK_3_d3wdm-ma2Ekgvd1eCnpwBfuCu38FTkiX_EehudbBw95lpu4trcEbNVuvIXzLlkJwcC2DT1EkE3Mvv_J5zOrRhwiLmUZE2mMu8jGUD6Rf-PaMAvMgY/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/AVvXsEjjN_Qjybk_EigaE652wXE-kCNK_3_d3wdm-ma2Ekgvd1eCnpwBfuCu38FTkiX_EehudbBw95lpu4trcEbNVuvIXzLlkJwcC2DT1EkE3Mvv_J5zOrRhwiLmUZE2mMu8jGUD6Rf-PaMAvMgY/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/AVvXsEhDOk_s64sGrOAxEij4jjrYO5onwXcFK5jkZugXk0Cr_msT_zZMmflSn7ZyTL4n-9wsTCnINwo-QQCBhSmfVhlBaOH-J_3RU9FOc1YvAiUm6iZ3TjXM2psutJaE6dXH8w0FQBN60rOEIJ0K/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/AVvXsEhDOk_s64sGrOAxEij4jjrYO5onwXcFK5jkZugXk0Cr_msT_zZMmflSn7ZyTL4n-9wsTCnINwo-QQCBhSmfVhlBaOH-J_3RU9FOc1YvAiUm6iZ3TjXM2psutJaE6dXH8w0FQBN60rOEIJ0K/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/AVvXsEijvSr3_6ocCYHYITX9Rpyz1MDCAfgoXZmG44l_CkM5fr9FJD4O7y20hHFNoXYMiZ3q3HpUtta-iVR-QkoSrUD-rBl1WZpWE9yRFHE6gvjxk6ZHqpPczfWFIRA4mkELDUVNwVbBxwQ5UNgC/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;
}
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjN_Qjybk_EigaE652wXE-kCNK_3_d3wdm-ma2Ekgvd1eCnpwBfuCu38FTkiX_EehudbBw95lpu4trcEbNVuvIXzLlkJwcC2DT1EkE3Mvv_J5zOrRhwiLmUZE2mMu8jGUD6Rf-PaMAvMgY/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/AVvXsEjjN_Qjybk_EigaE652wXE-kCNK_3_d3wdm-ma2Ekgvd1eCnpwBfuCu38FTkiX_EehudbBw95lpu4trcEbNVuvIXzLlkJwcC2DT1EkE3Mvv_J5zOrRhwiLmUZE2mMu8jGUD6Rf-PaMAvMgY/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/AVvXsEhDOk_s64sGrOAxEij4jjrYO5onwXcFK5jkZugXk0Cr_msT_zZMmflSn7ZyTL4n-9wsTCnINwo-QQCBhSmfVhlBaOH-J_3RU9FOc1YvAiUm6iZ3TjXM2psutJaE6dXH8w0FQBN60rOEIJ0K/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/AVvXsEhDOk_s64sGrOAxEij4jjrYO5onwXcFK5jkZugXk0Cr_msT_zZMmflSn7ZyTL4n-9wsTCnINwo-QQCBhSmfVhlBaOH-J_3RU9FOc1YvAiUm6iZ3TjXM2psutJaE6dXH8w0FQBN60rOEIJ0K/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/AVvXsEijvSr3_6ocCYHYITX9Rpyz1MDCAfgoXZmG44l_CkM5fr9FJD4O7y20hHFNoXYMiZ3q3HpUtta-iVR-QkoSrUD-rBl1WZpWE9yRFHE6gvjxk6ZHqpPczfWFIRA4mkELDUVNwVbBxwQ5UNgC/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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJVg1E2RpqYBAy6igfVLK1fcOXBvX8KIo1hOOPZFeiI6QQWHSkDqPk3_eiKc44iRpuwQfzBwQzw-h4P9ylQJpNIT0VHmDHrzCmOLkvAoG8LHrita89xkFroTPhiwZ87rLWRjDDj0gci3kK/s200/Blue+Impression+Drop+Down+Menu.png)
HTML CODE:
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
CSS CODE:<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/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/AVvXsEhFmi0KFqZ8p6TxFtPa_xBz6rwt-m7GFz79x0_LPrl6BCdx_9T7t5xuZdZ9SkkZyx4ql-xgyAIflFPr_Qy-wrbx7CKvP5gpyDhocJalElAdgnl9JcrSnSS_MNMjCGRt6EF5Z0X7rKQvYqM1/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/AVvXsEix2D7_vPwItudAqiw60vNlTu8oOywPmG2ZKyZZxJ5-UM4VL5BAflI7mLUrrgeO0M-IC7X0vJphSnTY_CK-op-BF5Rx6vhsBqQMkZiwC6XNQMtOvayUbPLotTfR0wZLZBtcHCrkYc5yVY1U/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYuNsMCEev7GorTYC9aBWilnbwFSQmhehroJJkQQU1jbLfu0FOi63Cd7dgrrZD_dUIfY37sjVEn119n-Q9wJY6kMLOb3Oxgll0FSpYcMOzMABuuidqU96tAEM_ITyBUH0pAfRxrG8rpG_/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYuNsMCEev7GorTYC9aBWilnbwFSQmhehroJJkQQU1jbLfu0FOi63Cd7dgrrZD_dUIfY37sjVEn119n-Q9wJY6kMLOb3Oxgll0FSpYcMOzMABuuidqU96tAEM_ITyBUH0pAfRxrG8rpG_/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/AVvXsEiDtlIb3o0ZrEqq2hEEFMiALwmb0nPb0VDCqctWvaV7jnl7WSM6z_XEIKSkqCAoiiGQ_rd6rokNucpHBlwfuclfpI9dz6yfgxCBTleecezin0__QqXbz_h-IHvXVVeh-rFttZWOpiJWAN0W/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/AVvXsEjJgsBjDovQ9EHhbTbTyXzlDscPCU2OWS3sw3Uy3CC40MmErBsglglfP6PXDMM6gpp7nPsfIwmyKzaADiEZG3egKS3ze0gwO5vMGRNzoReVukznvlPr1CR6NA6XGVXCPqecpORY7CakrF7g/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/AVvXsEjJgsBjDovQ9EHhbTbTyXzlDscPCU2OWS3sw3Uy3CC40MmErBsglglfP6PXDMM6gpp7nPsfIwmyKzaADiEZG3egKS3ze0gwO5vMGRNzoReVukznvlPr1CR6NA6XGVXCPqecpORY7CakrF7g/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;}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFmi0KFqZ8p6TxFtPa_xBz6rwt-m7GFz79x0_LPrl6BCdx_9T7t5xuZdZ9SkkZyx4ql-xgyAIflFPr_Qy-wrbx7CKvP5gpyDhocJalElAdgnl9JcrSnSS_MNMjCGRt6EF5Z0X7rKQvYqM1/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/AVvXsEix2D7_vPwItudAqiw60vNlTu8oOywPmG2ZKyZZxJ5-UM4VL5BAflI7mLUrrgeO0M-IC7X0vJphSnTY_CK-op-BF5Rx6vhsBqQMkZiwC6XNQMtOvayUbPLotTfR0wZLZBtcHCrkYc5yVY1U/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYuNsMCEev7GorTYC9aBWilnbwFSQmhehroJJkQQU1jbLfu0FOi63Cd7dgrrZD_dUIfY37sjVEn119n-Q9wJY6kMLOb3Oxgll0FSpYcMOzMABuuidqU96tAEM_ITyBUH0pAfRxrG8rpG_/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTbFoQRXc-UxUZo0YhIwyIja04fYW3bBGBlQf2JI7ZXnPoyFWiV7aU0eobP_9Hha1uMM2xMWAINkj-HbxZFiLtPooN3SxBUxgQHzcCLNmTHmVeHrxN6aPPZAGyA2OPO4_mWbGQNsSz_Ny/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZYuNsMCEev7GorTYC9aBWilnbwFSQmhehroJJkQQU1jbLfu0FOi63Cd7dgrrZD_dUIfY37sjVEn119n-Q9wJY6kMLOb3Oxgll0FSpYcMOzMABuuidqU96tAEM_ITyBUH0pAfRxrG8rpG_/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/AVvXsEiDtlIb3o0ZrEqq2hEEFMiALwmb0nPb0VDCqctWvaV7jnl7WSM6z_XEIKSkqCAoiiGQ_rd6rokNucpHBlwfuclfpI9dz6yfgxCBTleecezin0__QqXbz_h-IHvXVVeh-rFttZWOpiJWAN0W/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/AVvXsEjJgsBjDovQ9EHhbTbTyXzlDscPCU2OWS3sw3Uy3CC40MmErBsglglfP6PXDMM6gpp7nPsfIwmyKzaADiEZG3egKS3ze0gwO5vMGRNzoReVukznvlPr1CR6NA6XGVXCPqecpORY7CakrF7g/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/AVvXsEjJgsBjDovQ9EHhbTbTyXzlDscPCU2OWS3sw3Uy3CC40MmErBsglglfP6PXDMM6gpp7nPsfIwmyKzaADiEZG3egKS3ze0gwO5vMGRNzoReVukznvlPr1CR6NA6XGVXCPqecpORY7CakrF7g/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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3AyW28IS-qnymxL4XA4vHmPYQrU3wilk6GZenRxrxwcsPg1Qdok3mlhYCNDbDi4fL2xuvnJBL8hWRerwIkMdNR24PIGLiCVqjxidud7F4G_GriWNEaUaWgdyOw0gukFnJcBWF02DhsUpT/s200/Green+Impression+Drop+Down+Menu.png)
HTML CODE:
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
CSS CODE:<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/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/AVvXsEhhoP-KmgnA6cD_AdsqI0Tvf-hfYIi4RjFaFHirfOYTI7tysuq5H6N3yKmhg6Fq2iT0RTT259YMIewfj7BHDLdLY0_XYp8Ibbc7XimFJg0aw4jKCcTlpI79E8c4AaQ8U44BcmHZoAd6Zi8Z/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/AVvXsEjbQ-OPXpsSEgedJh3rl__BnRk6WlQkYoDUibsjz8-OZH7iFXbwerOHVH-0lPUDTfeQQKpdsi6YRea2LevqJXPMIPkEa1HMS3NPbBbyumloaVRPHGQw6mwdax6PmSQwpASupntj1TDTnlBc/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh083IWDst8Gzz3jARkFpK4-sycgnuBZcAs4h3w0AZrQVWBulYtkEd4GwfHPfOahdD9qo8qn6O2_Z6XEgFTpwAFeqK1Q5ITdCFRbzYpjPheVOQDOZi_lGy_Y5NTKpSDf_By4kkbjROXt_Ew/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh083IWDst8Gzz3jARkFpK4-sycgnuBZcAs4h3w0AZrQVWBulYtkEd4GwfHPfOahdD9qo8qn6O2_Z6XEgFTpwAFeqK1Q5ITdCFRbzYpjPheVOQDOZi_lGy_Y5NTKpSDf_By4kkbjROXt_Ew/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/AVvXsEhqJiv86MbIHebqeLXnLhGh5XYnE1oklaUo-T1NKh_hwuGOSp4XY37Iyw5F9p5fKphXotxS3Uc4SfOwbK_hGLuZh533FYtB-e5G6N8PnJtX-w8f5h1ZnJMl0s50zQVruYfgcO-y3EHVgh6K/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/AVvXsEjwU6awr0RmWtSa4ApfNedffOFK09yB49hLAqgZTD3RXkdVjqxrrJFq6_WJTp0tke4Li717qoBIyvYwMZlHAaWWE0KLCSCXm84CHK5f8uZLM410I5LKzPwxjtc2OUh7fOo80TeOAf8s_gua/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/AVvXsEjwU6awr0RmWtSa4ApfNedffOFK09yB49hLAqgZTD3RXkdVjqxrrJFq6_WJTp0tke4Li717qoBIyvYwMZlHAaWWE0KLCSCXm84CHK5f8uZLM410I5LKzPwxjtc2OUh7fOo80TeOAf8s_gua/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;}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhoP-KmgnA6cD_AdsqI0Tvf-hfYIi4RjFaFHirfOYTI7tysuq5H6N3yKmhg6Fq2iT0RTT259YMIewfj7BHDLdLY0_XYp8Ibbc7XimFJg0aw4jKCcTlpI79E8c4AaQ8U44BcmHZoAd6Zi8Z/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/AVvXsEjbQ-OPXpsSEgedJh3rl__BnRk6WlQkYoDUibsjz8-OZH7iFXbwerOHVH-0lPUDTfeQQKpdsi6YRea2LevqJXPMIPkEa1HMS3NPbBbyumloaVRPHGQw6mwdax6PmSQwpASupntj1TDTnlBc/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh083IWDst8Gzz3jARkFpK4-sycgnuBZcAs4h3w0AZrQVWBulYtkEd4GwfHPfOahdD9qo8qn6O2_Z6XEgFTpwAFeqK1Q5ITdCFRbzYpjPheVOQDOZi_lGy_Y5NTKpSDf_By4kkbjROXt_Ew/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuo7hHfZ1IVorE7wBtH6KmqoRl0DTJq-y9DKatFVrNDs5oGNBYRvLndUr8SK9la6GKGzz9UQEdc01Ys-yFy2ZxhbKS1a6TOZkXJq5IcV51kncXAxPl0CFTUGYUerXjG_Qfd49otMzUUIC/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh083IWDst8Gzz3jARkFpK4-sycgnuBZcAs4h3w0AZrQVWBulYtkEd4GwfHPfOahdD9qo8qn6O2_Z6XEgFTpwAFeqK1Q5ITdCFRbzYpjPheVOQDOZi_lGy_Y5NTKpSDf_By4kkbjROXt_Ew/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/AVvXsEhqJiv86MbIHebqeLXnLhGh5XYnE1oklaUo-T1NKh_hwuGOSp4XY37Iyw5F9p5fKphXotxS3Uc4SfOwbK_hGLuZh533FYtB-e5G6N8PnJtX-w8f5h1ZnJMl0s50zQVruYfgcO-y3EHVgh6K/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/AVvXsEjwU6awr0RmWtSa4ApfNedffOFK09yB49hLAqgZTD3RXkdVjqxrrJFq6_WJTp0tke4Li717qoBIyvYwMZlHAaWWE0KLCSCXm84CHK5f8uZLM410I5LKzPwxjtc2OUh7fOo80TeOAf8s_gua/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/AVvXsEjwU6awr0RmWtSa4ApfNedffOFK09yB49hLAqgZTD3RXkdVjqxrrJFq6_WJTp0tke4Li717qoBIyvYwMZlHAaWWE0KLCSCXm84CHK5f8uZLM410I5LKzPwxjtc2OUh7fOo80TeOAf8s_gua/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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgErG3sVZBp-aQDLkJdoc8Y07UFlpcJbnufUEZmJwPwbfnwFnT4C1m1iJVyvLCNXYxUjz52352wyB7J5b-uZmlnDxhSZ_AiEfXl0maRJFfD_eoZQSDofRZ5nlskBsjzIO_4rEPe7y6nSWpz/s200/Grey+Impression+Drop+Down+Menu.png)
HTML CODE:
<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
CSS CODE:<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>
.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/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/AVvXsEhClK5-JcSjxaeFMCrJgMaknz8bh8e6J0ghyphenhyphendrtFwbag9MjAB1z9I2xTZUljqJROaQoUGOVc3ZIbgl5MNTkMEtRClCae-cxiUDpBejjZFtng4nBG1yQMXHzSiDZ7IV0EVsqWO2xcWKvxa8E/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/AVvXsEgvsPZWF-wALw-ADw1PcATIDFwqy3PStEVnFkY9ZZ7pj8yGW-0Ld07ma_tYnLLtrkKDnXqYbmvkhEPjT5-hJGQAjbF4UGMdhB17a5v51JbQpWtHgm4JluzHT7oirk0l8n5Sd0G6VAtdx2mv/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJHK0a4_KSOCwWKb7lLXSaisd6Cd2k22qC86RVUFKXvLW84-5GpGwM3hC6dL9Pb5_FV4anhzqstMCealZBnpJykuun_oMi5V-DsX9A6uNpku6NdIVBHYd_tpYvsRD32Z2J2KQnAlbyQn5/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJHK0a4_KSOCwWKb7lLXSaisd6Cd2k22qC86RVUFKXvLW84-5GpGwM3hC6dL9Pb5_FV4anhzqstMCealZBnpJykuun_oMi5V-DsX9A6uNpku6NdIVBHYd_tpYvsRD32Z2J2KQnAlbyQn5/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/AVvXsEgzVademeZZphIaBmCfo3MAMkvgh2j4NXgjZ2afN4Fbw0U_2ISthV3BkOAKYH5amcmJ-xYkxPZGqOYHgOpm-XY6g1rJv5412KvXkaRh1eBddgICFdAbkPZQFAPVYDBL_sOg15a7SdXN8jK8/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/AVvXsEhNjiOduqqfwPmtEIq5i7WiL4vjk46CcyC7qjvc7uGkZbxBi9rjHrBE7XM1MScN8_YOOPlEv13rS3TWMFJuzQRKI6khL4N-L2Fi6MDKlnwNbHfm0W7pZ7paGJFmsnh15KefFT-tY6tl7wRk/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/AVvXsEhNjiOduqqfwPmtEIq5i7WiL4vjk46CcyC7qjvc7uGkZbxBi9rjHrBE7XM1MScN8_YOOPlEv13rS3TWMFJuzQRKI6khL4N-L2Fi6MDKlnwNbHfm0W7pZ7paGJFmsnh15KefFT-tY6tl7wRk/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;}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhClK5-JcSjxaeFMCrJgMaknz8bh8e6J0ghyphenhyphendrtFwbag9MjAB1z9I2xTZUljqJROaQoUGOVc3ZIbgl5MNTkMEtRClCae-cxiUDpBejjZFtng4nBG1yQMXHzSiDZ7IV0EVsqWO2xcWKvxa8E/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/AVvXsEgvsPZWF-wALw-ADw1PcATIDFwqy3PStEVnFkY9ZZ7pj8yGW-0Ld07ma_tYnLLtrkKDnXqYbmvkhEPjT5-hJGQAjbF4UGMdhB17a5v51JbQpWtHgm4JluzHT7oirk0l8n5Sd0G6VAtdx2mv/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJHK0a4_KSOCwWKb7lLXSaisd6Cd2k22qC86RVUFKXvLW84-5GpGwM3hC6dL9Pb5_FV4anhzqstMCealZBnpJykuun_oMi5V-DsX9A6uNpku6NdIVBHYd_tpYvsRD32Z2J2KQnAlbyQn5/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2i70yQxeFYpJJZDqQi8uJTvFHRSjLiXreraeO_i9ZFJPx4WDqUXiziY1ENXzfeob8BKlRvTCfR8kt0IpS276eVGItpzZnCyAKqeiTeLN3KT2C70GTFmED4IyKoeLwFzTU6zlk4B4EvWPX/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibJHK0a4_KSOCwWKb7lLXSaisd6Cd2k22qC86RVUFKXvLW84-5GpGwM3hC6dL9Pb5_FV4anhzqstMCealZBnpJykuun_oMi5V-DsX9A6uNpku6NdIVBHYd_tpYvsRD32Z2J2KQnAlbyQn5/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/AVvXsEgzVademeZZphIaBmCfo3MAMkvgh2j4NXgjZ2afN4Fbw0U_2ISthV3BkOAKYH5amcmJ-xYkxPZGqOYHgOpm-XY6g1rJv5412KvXkaRh1eBddgICFdAbkPZQFAPVYDBL_sOg15a7SdXN8jK8/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/AVvXsEhNjiOduqqfwPmtEIq5i7WiL4vjk46CcyC7qjvc7uGkZbxBi9rjHrBE7XM1MScN8_YOOPlEv13rS3TWMFJuzQRKI6khL4N-L2Fi6MDKlnwNbHfm0W7pZ7paGJFmsnh15KefFT-tY6tl7wRk/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/AVvXsEhNjiOduqqfwPmtEIq5i7WiL4vjk46CcyC7qjvc7uGkZbxBi9rjHrBE7XM1MScN8_YOOPlEv13rS3TWMFJuzQRKI6khL4N-L2Fi6MDKlnwNbHfm0W7pZ7paGJFmsnh15KefFT-tY6tl7wRk/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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1EDJEh5XPiQCA0qznKBsdrOzoAIaUeygtpFZlGjCfW8KUXEieZnPF8-9sl5-nVirz90VOFdPep1fwYsOjngFa3dMGQgzIhRb_P-2xnrOtgO1FVtWNmMty1S8P0SFkWdxsdPRqp78ddKd1/s200/Blue+Tabbed+Drop+Down.png)
HTML CODE:
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
CSS CODE:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgQffWrNgtZbfLLZYebvRqVmcGXFkCy0GFzARAErvmo5y9zvsdfhYeqHXlL_lfM0Ua073oCzQG83EwZPU9gTP-XcZpCG2lY3IWgOzfQmNkwwvaG3fgFFLEvB1Hi9pXOqkP5e7wQBL1DnO/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/AVvXsEhEkzTYV2F-jN0Z0T2mX_Ro2X4E-HGsx02GV5xJFuSa-7BuPZZi0kDN_iHabJBzIlkPqznyWvRP06Z89dLn17AVDJZPfRaxjmXfSurIDwFxWXeVLFW1ufb8JbQtthBMTFESDIVHXIwOg5TZ/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
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/AVvXsEikgQffWrNgtZbfLLZYebvRqVmcGXFkCy0GFzARAErvmo5y9zvsdfhYeqHXlL_lfM0Ua073oCzQG83EwZPU9gTP-XcZpCG2lY3IWgOzfQmNkwwvaG3fgFFLEvB1Hi9pXOqkP5e7wQBL1DnO/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/AVvXsEhEkzTYV2F-jN0Z0T2mX_Ro2X4E-HGsx02GV5xJFuSa-7BuPZZi0kDN_iHabJBzIlkPqznyWvRP06Z89dLn17AVDJZPfRaxjmXfSurIDwFxWXeVLFW1ufb8JbQtthBMTFESDIVHXIwOg5TZ/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
9. Yellow Tabbed Drop Down Menu
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Py3q_xx5njczlAkNEyMzi9usTSARbHo3YTETONzkAy_zQrOoZbS89HYoYxvDhPeAyYs10-qIj-Ne2uysVomJLBJ7XUGuAd3ezQSdGcGzvWUJG44WLy3Y7c13qJhAGzMi6PpfhZVyJ6Y0/s200/Yellow+Tabbed+Drop+Down+Menu.png)
HTML CODE:
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
CSS CODE:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPdLKQibO3OA3sXwxanonHkJovCOoAKPOlZYLHor0AdQQ9jSrCjpsWJ3ChAyV-uohEcqwD4I-2RDSPhxrXBTFsnnaNKesYiowtDX9LioDlOEx4v1xJEW7ICQ1kjGBeCxgQnAcyfAxPbEP/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/AVvXsEh77odFNvjZNQD7sCfrYfGA7n8GL1_62ttFPdvt8dbq9kEyz8LV3SRgE5X553c4zagqfVZSXJ_z61OGVPskfqlukpB3bwpkZIEY8uf7Oqw6HHlnYHZhrDrPz1wD9SaKtByoPWITnLfN_6gT/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
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/AVvXsEjvPdLKQibO3OA3sXwxanonHkJovCOoAKPOlZYLHor0AdQQ9jSrCjpsWJ3ChAyV-uohEcqwD4I-2RDSPhxrXBTFsnnaNKesYiowtDX9LioDlOEx4v1xJEW7ICQ1kjGBeCxgQnAcyfAxPbEP/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/AVvXsEh77odFNvjZNQD7sCfrYfGA7n8GL1_62ttFPdvt8dbq9kEyz8LV3SRgE5X553c4zagqfVZSXJ_z61OGVPskfqlukpB3bwpkZIEY8uf7Oqw6HHlnYHZhrDrPz1wD9SaKtByoPWITnLfN_6gT/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
10. Tabbed Grey Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUuORMIDKkchf3RX9Kc5w4ui9FLzLC5gLkaPpf1BRzSK9kAI3Eiklk4ypl81eY8dnTYA63vJOKXHmKa5uFqPcS4vEmq2y7NMHxOwMQKHagFf7ABbnSpBTw80iw7qyqd7XFM__K1thTVR-H/s200/Tabbed+Grey+Drop+Down.png)
HTML CODE:
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
CSS CODE:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht49CS9e_0ANCsb4bChF8Nrq3nh_1sgFgbb-Tj26Nw9P5mKknXIG38qqHi28ChpXqSsCqhUI4Kxhq6qjgIVo84bawIYsU2uft8gWXXmNGEFjOmiYNmN2eGSLgYoSZ_prIqBN0IwA_gdyOl/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/AVvXsEg_EBLOuabWJB2Rh-78MEt-aWYHmOi4yFOvcd8ijASp-HjV0oUVoivFF12_poKSjQ5uKb0ghXxadiAlCGErqmuNpKq1FPQIS3Z9ckAINYD5g-YgiBvOBqQ7B0UYf-oVHkHIodSQmzUK1zZd/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
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/AVvXsEht49CS9e_0ANCsb4bChF8Nrq3nh_1sgFgbb-Tj26Nw9P5mKknXIG38qqHi28ChpXqSsCqhUI4Kxhq6qjgIVo84bawIYsU2uft8gWXXmNGEFjOmiYNmN2eGSLgYoSZ_prIqBN0IwA_gdyOl/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/AVvXsEg_EBLOuabWJB2Rh-78MEt-aWYHmOi4yFOvcd8ijASp-HjV0oUVoivFF12_poKSjQ5uKb0ghXxadiAlCGErqmuNpKq1FPQIS3Z9ckAINYD5g-YgiBvOBqQ7B0UYf-oVHkHIodSQmzUK1zZd/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
11. Red Tabbed Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvCyNffKRxTr1JvpZqg7FRkAH-GBI7VM7DxNEmXuA2FS98SSgogU0HazhEvM25egTHhcIMK9sfr41xpoRdeDgCA4Prs1QQnZfZiu6t94UMMee1mGpRUydYZ6dHD-nljPbIm0rKywzT7yyb/s200/Red+Tabbed+Drop+Down.png)
HTML CODE:
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
CSS CODE:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqA9akkniOSc2QHEnV5zzGg03oDh3VxBZSKLjUfPrzAXxLvEYyjHU40TOM93PfH-K0m5KzU28aUpxnifwvB6M3Li0jBywUjpF0iR1ko1ehgwm5Sw-eCd371EjuftLUcrNiNkRGknkgVesi/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/AVvXsEiggX8PzMfjiR5_kvi-SsHc3gD7N4aCLvtT3lrO6RhxDh5BDEIe3U6aYQseaMqovapEdoKlLl6zIMM5gd0JrJSfouNOi-2HIwN4e-iaJt86l4DxGpIDNE3NMMSDlgIzUlV57pv84XcnNFcQ/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
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/AVvXsEiqA9akkniOSc2QHEnV5zzGg03oDh3VxBZSKLjUfPrzAXxLvEYyjHU40TOM93PfH-K0m5KzU28aUpxnifwvB6M3Li0jBywUjpF0iR1ko1ehgwm5Sw-eCd371EjuftLUcrNiNkRGknkgVesi/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/AVvXsEiggX8PzMfjiR5_kvi-SsHc3gD7N4aCLvtT3lrO6RhxDh5BDEIe3U6aYQseaMqovapEdoKlLl6zIMM5gd0JrJSfouNOi-2HIwN4e-iaJt86l4DxGpIDNE3NMMSDlgIzUlV57pv84XcnNFcQ/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
12. Black Tabbed Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0X8YcYF_5enPJRiLBi-_yXrleG3D1oF6QIt-_dyRrG9xnxYKUiApolsPXAhnfALULIVyKhH28ju86klRk5icWwaMoow9aWBX7aErhBDebLp1fOL0fv_sE-aTKlek-4mZCnlGmOclH2Qoa/s200/Black+Tabbed+Drop+Down.png)
HTML CODE:
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
CSS CODE:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgweTiY2ObwYbFxu4-7tArmtw4HKIw4LeqiS3p278QS2Vg1QHP92tsIXa5V86-cgmDiHLyX-39u27CbZ0s0bJqRpUFLrUelkQqDu2mTn9eBBqgPNAKVVej8dCD4T0gomCSg1mJO3FUZkW7Z/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/AVvXsEiPfA5bVH2l5UNQRofnF0GNKm9k9vYavkPpzC0NCfJ-WWvyRcc1edOsAZj5m0vOboQmSrZ-TGREC2BnvjW8wyxe7f8cJhDp2Vra-OMPQ_KbNm8-2DHdGflklx5Rn5dxQHCmOU_ViM0k5kT8/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
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/AVvXsEgweTiY2ObwYbFxu4-7tArmtw4HKIw4LeqiS3p278QS2Vg1QHP92tsIXa5V86-cgmDiHLyX-39u27CbZ0s0bJqRpUFLrUelkQqDu2mTn9eBBqgPNAKVVej8dCD4T0gomCSg1mJO3FUZkW7Z/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/AVvXsEiPfA5bVH2l5UNQRofnF0GNKm9k9vYavkPpzC0NCfJ-WWvyRcc1edOsAZj5m0vOboQmSrZ-TGREC2BnvjW8wyxe7f8cJhDp2Vra-OMPQ_KbNm8-2DHdGflklx5Rn5dxQHCmOU_ViM0k5kT8/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
13. Orange Tabbed Drop Down
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpV9kUmjDFcEzK_xZcJ8Y1nqlwSIMkvHe1WVSSxZT74ujDBthhUsqDf2gDl4ljKQGslZbfhb65WsLox0Sh_ya5XmiLEJy8ShNpFFooz7_Bqao05gxtq4nFOq3OkYZ3yK3jhairwOQ2h6Hq/s200/Orange+Tabbed+Drop+Down.png)
HTML CODE:
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
CSS CODE:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezZn_4haU9DAARXjrUjkp5iiX7Byz87tUz345-ySZxKScWkEsarHxhUo5gClI90qWM4ZJHXM0QZ0VyBT54w0NpXAF-OgcVCxMJB3dvIB_TqVlOJob-wwqZsXFjGYi3Ld-voSrTyAKofeq/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/AVvXsEis3zpSgsYL7t0FZfCcGzfZ3HSv7yHsKWTFTVB9bO_okxWggWL9XpE8HwDfCkRPptjWJuVqgBc31Wz2_o85shaj03cbG7gvs1SGC4Xx_pBOsYkmhxZOuPnBLNAKcZkJFLOmLL977v3E8bap/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
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/AVvXsEhezZn_4haU9DAARXjrUjkp5iiX7Byz87tUz345-ySZxKScWkEsarHxhUo5gClI90qWM4ZJHXM0QZ0VyBT54w0NpXAF-OgcVCxMJB3dvIB_TqVlOJob-wwqZsXFjGYi3Ld-voSrTyAKofeq/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/AVvXsEis3zpSgsYL7t0FZfCcGzfZ3HSv7yHsKWTFTVB9bO_okxWggWL9XpE8HwDfCkRPptjWJuVqgBc31Wz2_o85shaj03cbG7gvs1SGC4Xx_pBOsYkmhxZOuPnBLNAKcZkJFLOmLL977v3E8bap/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
14. Simple Red Drop Down Menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSdqpibxlxN9bgZDvAHl9kna2sNl7Nu6NXzPlGgbH1XjVzWXYGnkmG83H8Nf9hxEmJaqMndzQ2iVo6iBvp6NeC8-xWp7uCOcm4QUTfIVfQeBA3_ccSsmJITCUxjfsaGlX16Dhwt77ssVuW/s200/Simple+Red.png)
HTML CODE:
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>
<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>
<li><a href="#" title="International">International <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>
<li><a href="#" title="Turnkey">Turnkey</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>
<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>
<li><a href="#" title="International">International <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>
<li><a href="#" title="Turnkey">Turnkey</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS CODE:
div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }
h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }
ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
15. Simple Black Drop Down Menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi92HSTYtyg7i29QN0XAg2DL7yMo1_sK_HFl8uVqOcdTRMIIbEiugBYzMZQY7O9lSqTocTQU_4imWkdkXCgr5Dyaf3c8r0T2G2VMzFl1OSRMldbIfqwIR0EbPAezqjZ87EMEW0EI1lHpSBD/s200/Simple+Black.png)
HTML CODE:
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>
<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>
<li><a href="#" title="International">International <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>
<li><a href="#" title="Turnkey">Turnkey</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>
<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>
<li><a href="#" title="International">International <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>
<li><a href="#" title="Turnkey">Turnkey</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS CODE:
div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }
h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }
ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
16. Simple Blue Drop Down Menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3m58RLA8XEu1TbYSVZf3KMDrhQ8-Fk5-VD99FUDLPiTfsJpTbvIdLm3wPp2ouuRWq9ks6UQDzKYbESgplrCmY0F-b5nEpT89L5ZzhmHKWYFsUCVEID0dKlGYyUx5-Qg-_wE9fAconIem/s200/Simple+Blue.png)
HTML CODE:
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>
<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>
<li><a href="#" title="International">International <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>
<li><a href="#" title="Turnkey">Turnkey</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>
<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>
<li><a href="#" title="International">International <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>
<li><a href="#" title="Turnkey">Turnkey</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS CODE:
div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }
h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }
ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
17. Simple Green Drop Down Menus
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIEy53-MbMn8z2kn-R7CONLbCoQoUx2aKDQmNs1YOik1I1-aBuRf0fITsxT83goTAt5CfUZZ4q0iYbh-wKwLTc_5z_FoaeVNupchgqZEx_hIw8ucbmY5QN9mkTs_KPwsQpuSavtvZyABnx/s200/Simple+Green.png)
HTML CODE:
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>
<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>
<li><a href="#" title="International">International <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>
<li><a href="#" title="Turnkey">Turnkey</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>
<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Six String">Six String</a></li>
<li><a href="#" title="Twelve String">Twelve String</a></li>
</ul>
</li>
<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>
<li><a href="#" title="Accessories">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>
<li><a href="#" title="Strings">Strings</a></li>
<li><a href="#" title="Tuners">Tuners</a></li>
<li><a href="#" title="Plectrums">Plectrums</a></li>
<li><a href="#" title="Capos">Capos</a></li>
<li><a href="#" title="Cases">Cases</a></li>
<li><a href="#" title="Straps">Straps</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>
<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>
<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>
<li><a href="#" title="International">International <span>»</span></a>
<ul class="navigation-3">
<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>
<li><a href="#" title="Thomann Music">Thomann Music</a></li>
<li><a href="#" title="Turnkey">Turnkey</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS CODE:
div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }
h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }
ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }
ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
{ 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,
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
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,
<li><a href="#">Home</a></li>
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 ]]></b:skin> 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/AVvXsEjQYQWO2AgL-IfGZ_mqTAs43MEjAEnkdRgDMRngxFJZAdwEcRq9CKxMRIqIBkvMd8XWoEHcpQ2cb95d-NY4hf_fyViAp-2Ugh4Bee3hNc79sfHyNyxBBcVVYyL4IspWp0kvZmLltTrmn7Sf/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/AVvXsEiJGeXueWZ7BpNBJsCQTheQwnt0Nv_mH8Hj1LdQyf_M7tZ2uRu4h0mVSRu0wCr33RKHfzv4R-LkQHdOjVHb5skTyVcmHzRm1wTNWBgvRvkIwO66G_PvlRdswOLJhqDJueAlf6s7ID_2_ZbC/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/AVvXsEhlgdD1n8xpP89wKp-1mN8pigNyUiH_ff8SchqJWHRbdvEud9OTNA8p-Xuznjv11IbA-bzRn28v-82MLkdNFcJfQHUgYFLzOMSFR0m-cAjKLUbxy6EcDTU1YxK4s9-FgJzRjTdlz47ElFsn/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/AVvXsEhuxCcDcfeZ5ixBR_a4REZxVGc-Adg3sRacyA8tNFMt7dQ9ED6Lb0CI16pfZvhjkBGOTjjRjF6m9CXMbSoO-j50Plqwpkxr_jclMDBat3dJ7dqf9nw88gV6Jnti_lK_9LdJT6l3pChkmWQO/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
170 Responses So Far:
hi freind..your blog is great.friend do you like exchange ads banner..i hope get some trffic my contry to yor blog..please contact me (sameera.blogzz@gmail.com)
thanks
HAI
FRIEND ARE WANT ADV TO MY SITE FOR FEE FIRST I WANT UR EMAIL ADDRESS. THEN WILL MORE...HURRY
MY SITE WWW.AMAZINGVIDEO.TK
HAI
ARE WANT ADV TO MY SITE FOR FREE ,FIRST I WANT UR EMAIL ADDRSS.....MY MAIL ABDULRAZAK1010@GMAIL.COM
WEB: WWW.AMAZINGVIDEO.TK
cool bro..... thx before.... please follow me.....
It works great, but I am having a hard time changing the background colors. I'd like the background for all of the tabs (the standalone and drop down) to have the light grey background of the stand alone pages. I tried changing both the url in the code to a new url but the only change is for the drop down tabs. Other than that this menu works perfectly and I'd love to keep it.
http://clairedelaluz.blogspot.com
hey, bro thanks for this awesome bars but i wanna to make the buttons on right as iam blogging in arabic could u help me plz ?
here is example : http://shbab25.blogspot.com/
very nice bro but could i reduce the width of the tab and plz tell me how to do this ?
thx man
thx man , but i want to reduce the width of the widget so tell me how i do this plz .... thx again
Thanks a lot for sharing this nice post!You’ve done really excellent job!
thnks Dudue:)
THANKS. Cn you help me with this problem. The options do not fall down on my blog. Help required SOS.
My blog address is gsmcgymkhana2.blogspot.com
Nice theme I'm gonna use it on my next site. I loved the layout and design of the site. Share it to each other is my current website and I am constantly conscious of it's design factor. Thanks.
Awesome blog. I enjoyed reading your articles. This is truly a great read for me. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.web development company in india
What to do if those drop down menus don't show?? i tried to change z-index, but no luck..
hi there...
I just copy css & html "Sunrise Gloss Drop Down Menus"
but it does not work with drop down...
can you help me?
@GSMC GYMKHANA
i have the same problem too....
my blog : http://dia-honey.blogspot.com
thank you for the post..
thanks a lot for sharing this.
web designer india
It's awesome ,but having trouble with changing background colours... can i get a help... any way thanks..
How Can I add these to my website... ?
Lovely tutorial! However I'm having some alignment problems. I want the menu to be across the whole page and the tabs to be in the middle of the menu. Please help me out!
I fixed the problem myself! Have a look at http://www.rocker453.blogspot.com/
I still don't get it. I have tried almost every method available on the Internet but this drop down menu thing is not acceptable to my blog template. When I will change my template I will surely do this again.
Here I have blog provide menu script too
http://designedmenus.blogspot.com/
wonderful information dude..thanks
saya tidak mengerti...
makasih
thnx dear, i have add menu in my blogCode-Solutions and its working fine for me. thnx
This isn't working for me. I got the gadget up..but I don't know what "link" to put for the drop down menu. That would be a search result on my blog for example "beauty" or "pets" right?
These widgets would help many newbies to extract some new ideas for designs in drop down menu for bloggers.It seems to be very informative with ur widgets.
Wonderfull And Very Helpfull Thanks And Congratulation for this nice blog
download movies songs games for fre
http://mediafirehollywoodmovies.blogspot.com/
THANKS BRO...MY BLOG LOOKS GREAT!!
I try aplly the script on my page and it looks good except submenu colour blended with text...
is this script just work on some templates, please give some advice which template match with this script.
thanks
Can anyone help, I have installed the simple red drop down menu bar which I like a lot, but the spacing between menu items is just too much. In other words
The way it looks now is
Home...........About..........Products.........Etc
I want it to look
Home About Products Etc
How do I get the spaces out.
Many Thanks
Thanks a lot Buddy...
Menu is Good But it works in Firefox not working in Explorer How to make it works in Explorer also ////
Assalamualaikum Wr. Wb
Hey Dude.
I have been applying it on my blog
And Success.
I am very grateful.
But will you give your css code because I saw your blog is very nice.
Could you, please?
See it on http://merahmarunluck.blogspot.com/
I find this post very very useful. It's great.Thank for sharing.
thaks post ful
pls visit me:http://thephotobest.blogspot.com/
I have tried jquery slideshow but the menu dropdown is hidden (blocked by the slideshow). Does anyone know what to do with it?
Hi, I have tried the dropdown menu but I still do not know how to edit my web html since I have no access to edit it. I am using b2evolution blog template. Please help.
http://lampunginfo.com
great .. make blogger lok nice .. thanks
great its good
http://www.drupalnetworks.com/
hei, come to my blog, dalamrenunganku.blogspot.com
Its not working in Internet Explorer 8. The drop down menu hide behind the post in IE. Please tell me how to fix it?
It's alway vertical. What am I doing wrong?
Hi haveadd the menu items it's working but when I add the sub menu's for pages iit's not displaying the drop down menu option plz help me.....
Thanks for your information...this is nice blog's..
love it
Thanks for posting, this is awesome!
Why wont the drop down work?
Can someone plz explain to me how to make it work?!
I loved the drop down menu effect.
Thanx.
gan cara bikin postingan biar bisa di tari itu gimana,..?
thank lagi cari menu nav ne , ...
Hello when I do this, the site doesn't really show the tabs going down it looks like they are getting covered up by something. http://freehrs.blogspot.com
thanks man i use the 12 one and it's amazing
I am going to use number 7 on my site. Thanks for the effort.
Ever green post. Nice. This menus are very cute. Keep it up.
http://adf.ly/msMG
http://shinemark.blogspot.com
helpful post... Thanks lot for these wonderful menus codings
nice post anyway you cool man :) i must try that.. all i need just for that drop down style hehe
thank yu for posting
Everything would be okay if I did not spoil the top of the template :(
thanks for the good article man........ really awesome post. www.cyberfinger.blogspot.in
nice article, my blogg need it, pembuatan blog become easy.
Tutorial pembuatan dropdown blogspotnya lengkap banget ya..
thanks for share. sukses selalu
coba dulu ah
I like that this website!!!!!!!
Nice info. Very good for my blog.
Thanks
good idea
copy paste work not yet done
Thanks for this awesome widget
Aku Mau Coba Dulu Ahhh,,,,
Oh ya gan berkunujung balik ya di my Blog
ARFHA MP3™ | Mp3 World Music Downloads
Thank You
Hi the back ground color is not changing, Please help.
Ok...i will try that on my blog...
Thanks
I tried to use this code because the color of my menu is very different of what I wish it o be. Using any of this codes, it stays in the same grey color as the custom menu. What should I do, any clue?
http://cesarcrash.blogspot.com
Hello....i been trying for several time but the it not dropping down as it should . Could help please
my blog- http://2eyes24eyes.blogspot.com
its not working at firefox and google crome
its working at Microsoft Internet Explorer only
what should i do to work at all
great aritcal on drop down menu very infromative and varied lots of choices as per the requirement
thank from www.youtubeviralvideos.in
Wow thanks for doing all this and for sharing it. This has been extremely helpful.
Download Softwares Full Crack
Hey it really worked. Thanks a lot man.I knew a bit of HTML so i changed the entire code to suit my style. Check it out here www.techytk.blogspot.in and for the code, contact me
Ga Ngerti Pas Masukin Kode Yang Panjang Pas Di Masukin Malahan Banyak Tulisan Di atas Tolong Bantu,,
Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
umm.. dude, i hope, i really hope you'd notice that the drop down menu number 15. Simple Black Drop Down Menus color turns out to be red.. yes, red.. not black..
Thanks ya masbrowwwwwwwwwww
thanks for posted
Please, visit my home page: http://lapmagfpt-vnpt.com/
Great post. I really appreciate your blog. Thanks
it's work. now my blog looks more cool. thank you
Thank you. i got u. but i found a easy way by my self.
i want to know about black links.
hey..
how do we change its position , for eg i have a 1200 px title and i want to to make it 1200 px too in center
so how do we do it?
Plz help me,I used your customize menu but When I clicking the custom tabs, it can't show the drop down list.What should i do...?
nice bro...
hi...i tried alter the code myself but the drop menu become like this....any suggestion?
http://gitarmalaya.blogspot.com/
dude..... thank you very much...... Thanks for the awesome menus...... great work man.,.....
Thanks for the code, but somehowe it doesn't seem to work for me. I used the Massive Blue Drop Down menu. There is a gap between the topmenu and submenu. When i try to hover from the menu tot the submenu the mousepointer crosses the gap and the submenu disappears. please help
Appreciate this post. Let me try it out.
Here is my webpage - Wicked Broadway Show
Awesome dropdown menus navigation thanks bdlab
Excellent blog, I like it. A lot of useful information. Thanks to the author. More on this topic thank you and Good day, everybody!
the man is taking back links from u guys mind it
Hi there, Just needed to mention your website is particularly excellent and I genuinely like the blog style and design. Is it a customized design or some theme I can down load also? helium boy apk
thank you very much bos !,i so need this !
i know if make dropdown menu is have javascript...,but No Have !
well drop down menu is hard for me. and what is Moksha yadav saying you getting backlink from us????
hi thanks for sharing it........
also check my website....
www.mediafirefree.co.cc
Hello there, just became alert to your blog through Google,
and found that it is truly informative. I am gonna watch out for brussels.
I will appreciate if you continue this in future.
Many people will be benefited from your writing.
Cheers!
My web page - Ovarian Cyst Miracle Review
I love your blog.. very nice colors & theme.
Did you design this website yourself or did you hire
someone to do it for you? Plz answer back as I'm looking to create my own blog and would like to know where u got this from. cheers
Stop by my homepage - homes for sale in weslaco tx
My brother recommended I might like this website.
He was entirely right. This post actually made my day.
You cann't imagine just how much time I had spent for this info! Thanks!
Feel free to visit my blog post A Frame House Plans
thank you very much for sharing this information i really need it..
Mantap artikelnya, thanks for share.
Woesome post Supper.... I also made a site pls go and seeeee pls... http://www.pc24help.blogspot.com
Ini baru mantep tutorialnya..lengkap abisz !!!
I Really Liked Blue Tabbed Drop Down . Thanks Alot for this
Everything is very open with a really clear clarification of
the issues. It was really informative. Your site is extremely
helpful. Many thanks for sharing!
Also visit my web-site wikilinks
Nice explanation with great screenshots,,,,,very nice tutorials.
If some one wishes expert view regarding blogging and site-building then i suggest
him/her to pay a quick visit this blog, Keep up the fastidious job.
Look into my web page - Coupon Code
Thank you for writing this information within your website.
My web blog ... Digital Printing Melbourne
Hi one and All.... just check out my blog for you kind info and to clarify you doubts...
http://livewickets.blogspot.in
Simply great.
Thank you.
Thanks pal nice post i like the green navigation widget.
After using that widget my look more good take look at my blog exefreeware.blogspot.in
It’s really a great and helpful piece of info. I am happy that you just shared this helpful information with us. Please stay us informed like this. Thanks for sharing.
Web Designing Services
At a Global market place you will find multitude of places which would offer you array of services but we provides you professional services at an affordable rate. So, come and maximize benefits of your online presence and associate with us.
Screw Oil Press
http://www.oil-press-machine.com/product/oil_press/screw_oil_press.html
:) Thanks for share.
It is very helpful information of integrating drop down menu and side in your blogs.I have decided to create drop down menu in my blog.Thank you for sharing your great coding of drop down menu.
Go through along a get a thing or two about him.
. In the container of unsecured loans, the repayment timeframe is very short,
spanning two months.
Here is my page : instant payday loans uk
mine isn't working please see my page... i am using watermark template- could this be the issue?
Thanks Meg from Unique Designs And Finds
Great post about this. I'm surprised to see someone so educated in the matter. I am sure my visitors will find that very useful.
Blue Tabbed Drop Down is really awesome drop down menu . Really thanks alot .. i going to use it right now :)
Amazing drop down menu widget....!!
Thanks for Sharing
i have a problem wit my drop down menu , it cannot expand so same contents are hidden .what should i do?
Your blog posts and articles are very interesting for me so inspired, and I hope you can last blog, so I can see the article and post your next blog, thank you for your info
Nice blog posts and articles.
nice post,,thank you for sharing the article
greeting, I have used your tutorial for a blog of mine and it is fantastic. Great work. But recently after google change the new look and I created another blog using the same drop drop menu it just doesn't work. the drop down tab hid behind the post. Any help appreciated.
1st blog : www.sucicare.blogspot.com
new blog ; www.http://gng4uglobal.blogspot.com
thanks
reply to sucare blog email
I thank you for sharing.
Ι've been browsing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did, the internet will be much more useful than ever before.
my web site - finance
Hello, I wish for to subscribe for this blog to take newest updates,
so where can i do it please assist.
My webpage Work from Home
I have read so many articles or reviews regarding the blogger lovers however this paragraph is in
fact a pleasant piece of writing, keep it up.
my web site :: speed up my computer
I'll right away take hold of your rss as I can't in
finding your e-mail subscription link or newsletter service.
Do you have any? Kindly allow me know so that
I may subscribe. Thanks.
Also visit my web blog : free iphone
Your 17 Drop down menus look very good.
I have tried to implement the first one, I have entered the code in by hand.
Is the background gif necessary, I don't understand why it links to your site. Can we just substitute something else?
Thanks
Excellent, what a blog it is! This blog provides useful data to us,
keep it up.
mу site ... acupuncturists
Look at my blog post hot stone treatment
It's a pity you don't have a donate button! I'd most certainly donate to this brilliant blog! I suppose for now i'll settle for
bookmarking and adding your RSS feed to my
Google account. I look forward to brand new updates and will share this website with my Facebook group.
Talk soon!
Here is my page ; acne information
Yes absolutely right your website information about Web Design & Development. No doubt Best Web Design is changing your Business Quality and revenus: we design a customer needs website & Deliver quality of Web Designing
HTML
Nice styles , I have added #12 in my blog ,
http://www.onlinecorners.com
Keren.....Makasih Ya sob
╔══════════════════════════════════╗
║╔════════════════════════════════╗║
║║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░░▄▄░░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░█░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░░█░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░░█░░░█░░░░░░░░░░░░║║
║║░░░░░░░░░░░░░░█░░░░█░░░░░░░░░░░░║║
║║░░░░░███████▄▄█░░░░░██████▄░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░███░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░███░░░░░║║
║║░░░░░▓▓▓▓▓▓█░░░░░░░░░░░░░░█░░░░░║║
║║░░░░░▓▓▓▓▓▓█████░░░░░░░░██░░░░░░║║
║║░░░░░█████▀░░░░▀▀████████░░░░░░░║║
║║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║║
║╚════════════════════════════════╝║
╚══════════════════════════════════╝
Qnando
Excellent blog you have here.. It's difficult to find good quality writing like yours these days. I seriously appreciate people like you! Take care!!
Also see my site - legitimate work for stay at home moms
I have read so many articles or reviews regarding the blogger lovers except this
paragraph is genuinely a fastidious piece of writing, keep it up.
My page - meratol review
Thank you so much for this collection bro.
Bloggerjin
Awesome widget! Keep it up.
Bloggers are expecting this types of widget.. Thanks! :)
Hi ,
I enjoyed reading your blog with my partner. She loves the style and read so many fashion related news. I got your link from here. This is an excellent piece of writing.
Thanks pal nice post i like the green navigation widget.
After using that widget my look more good take look at my blog automatic backlinks
Regards Gan nice post I am glad that the green navigation widget.
After using my widget looks now better see backlinks blog
thank you
Plakat and trophy
Thanks for sharing this information.
Web Design Company In India
Thanks for your post i have implement it in my blog
The drop down menu you provided are just awesome. I will definitely use then in my upcoming projects. Good work and keep it up.
thank you
عمل ايميل ياهو
طريقة عمل البيتزا
Awesome widget! Keep it up.
Bloggers are expecting this types of widget.. Thanks! -:)
thanks dude nice work
second one is awesome its make my blog better look
take a look at my blog exefreeware
Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.
http://freebietemplate.com/css-designs/css-designs.html
have a nice day
thanks for share,
thanks
thank u its a great work... i have install one with some modification and it work perfectly...
http://le-fooot.blogspot.com/
Nice Post..Thanks for Sharing.
Added to my job and it worked fine. Great widget. Please share if you have similar.
THANKS BRO...MY BLOG LOOKS GREAT!! http://przepisy-po-angielsku-sortedfood.blogspot.com
yeah
I really like "Grey Impression Drop Down Menu". It can give a technology based website, a more futuristic realism. Thank you for sharing those menus and detailed customization.
useful stuff ,. Thanks for sharing this post..
Great post i really appreciate this post because a student i really want to become a
Web Designer and i'm looking also Wordpress Courses i was planning
to learn more about wordpress also. but anyways i will keep update your site for more free informative post. thanks for this post it helps me a lot.
Spot on with this write-up, I honestly believe that this site
needs much more attention. I'll probably be back again to read
more, thanks for the advice!
Look into my weblog: buy soundcloud plays
successfully! thank you very much for the tutorial
Awesome collection of codes and menus. It has lots of variations. Few of the menus are best for my entertainment websites. Keep up the good work.
nice article..... very good....i like.......success
Awesome collection of codes and menus.This is a Helpful Post i am Adding This Menu In My Site Thanks Techtunesu
Post a Comment