Tips n Tricks: Blog widgets

Showing posts with label Blog widgets. Show all posts

Animated Flash Tag Cloud For Bloggers

0 comments 4:15 AM Posted by RB
Labels: Blog widgets

Labels are required to show the categories of the article, by default blogger shows two type of labels like list and cloud. But here is the beautiful animated flash tag cloud for bloggers. You are going to find out that your blog or site looks really beautiful and clean with widget.

Now how to install this beautiful animated flash tag cloud, follow the simple instructions:

1. Login to your dashboard and go Design > Edit HTML.

2. Now press "ctrl+f" and find this code

<b:section class='sidebar' id='sidebar' preferred='yes'>

and after this code paste the code given below

<b:widget id="Label99" locked="false" title="Labels" type="Label">
<b:includable id="main">
<b:if cond="data:title">
    </b:if></b:includable></b:widget><br />
<h2>
<data:title></data:title></h2>
<div class="widget-content">
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
        <param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
        <param name="bgcolor" value="#ffffff" />
        <param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
      <b:loop values="data:labels" var="label">
<a expr:dir="data:blog.languageDirection" expr:href="data:label.url" href=""><data:label.name></data:label.name></a>
</b:loop>
</tags>" />
        <p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
    </object>

</div>
<b:include name="quickedit">
</b:include></div>

3. Now save your template and you are done. Now some modifications.

By default this widget uses following values;

Width is 250px
Height is 200px
Background color is white
Text color is Black
Font size is 12

All of this values can be changed.

How to change the height and width. Find this code

Now you can change height and width of the widget.

Change the Background color. Find this code and replace red color hex value with your choice

Change the color of the text: Find

Replace red color code with your choices.

To alter the size of tags/links: The size of text/links is by default 12. To change this find the code and replace red one with your choice.

Enjoy this widget. Make comments for improving this blog.

Thanx..............

"Read More"

Add Twitter official tweet buttons to your blog

0 comments 3:30 AM Posted by RB
Labels: Blog widgets

Twitter is one of the most popular social networking site. It can increase the traffic of your site like flood. So it is important that you have twitter tweet buttons to your site or blog to post them on Twitter. With this twitter tweet buttons you can directly share your post through twitter without any third party website. So you and your visitors don't want to authenticate third party to access your twitter account. This beautiful new tweet buttons load very fast on the net and post your article on twitter in few seconds. These tweet buttons are Vertical Count, Horizontal Count and No Count.

So to install this beautiful twitter tweet buttons to your blog or site follow these steps:

Login to your dashboard > Design > Edit HTML .
Click on "Expand Widget Templates".
Press ' ctrl+f ' and find <div class='post-header-line-1'/> .If you can't find this code than try with these ones <div class='post-body entry-content'>.
Now copy your twitter tweet button code just below the above code.

1.Vertical Count Tweet Button:

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

2.Horizontal Count Tweet Button :

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

3.No Count Tweet Button:

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>

Replace TWITTER-USERNAME with your real twitter user name.
If you want to show this tweet buttons not only on post pages but also on archive pages, home pages. label pages etc. Than remove

<b:if cond='data:blog.pageType == "item"'>

</b:if>

These codes from the above tweet buttons code.

Save your template and you are done with adding your Twitter Tweet Buttons.

"Read More"

How To Add Email Subscription Form Below Your Blogger Post

0 comments 11:24 AM Posted by RB
Labels: Blog widgets

To increase your subscriber's you must put an stlylish email subscription form below every post of the blogger. Whenever some one is landed on your post page, he might come through searching something, and might not be interested on any other topics. Email subscription form allows him to stay in touch with what he looked for.

By putting email subscription form below each post you are not only increasing the number of subscribers but also you can increase the traffic to your blog.Your visitors and reader can easily find subscription option. Once they finished reading post and come to end if they find it interesting they will subscribe to your blog.
You can add interesting lines in your email subscription form so that readers are attracted to subscribe.

Now to install this email subscription form below the posts ;

Now first of all create a back up of your template.To do this Login to your dashboard .Than Click "Design > Edit HTML " Now save your template.
Click on "Expand Widget" and expand your template
Press "ctrl +f" and find

<div class='post-footer-line post-footer-line-1'/>

Download this text document. Copy the text from from file and paste it below the code searched above.
Find "trickndtips" and replace this with your feed id.
Save the template. And you are done a beautiful email subscription form below posts.

"Read More"

How to add css/HTML menu to your blogs

0 comments 4:07 AM Posted by RB
Labels: Blog Hacks, Blog widgets

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

Get CSS / HTML codes here.

How To Add Drop Down Menu Widget To Blogger

Go to blogger dashboard
Now go to design
click edit html
Find(ctrl+f) ]]></b:skin>
Paste the css code above it.
Now find </header>
Paste HTML code above it.
Preview your template if it works than save your template.

See the video below for proper understanding

How to Add Css/HTML Menu to Blogs - Funny videos are here

"Read More"

17 Horizontal dropdown Css/Html Menu

0 comments 3:45 AM Posted by RB
Labels: Blog Hacks, Blog widgets

Here is the list of 17 beautiful horizontal drop down Css/HTML Menu for blogger

1. Massive Blue Drop Down menu

HTML CODE:

<div class="menu">

<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

CSS CODE:

.menu
{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQf44f_BXZAlU6A_EC_sDrHa_a4iCKncwULrIJkDC996vx8xYu5Cs0qGsMQqsL2EKNpDNQlZYpojS9ODMu8JT1rSJwm1r5-669uvJUZGmItQNOQoU22NOFGRSoRnv0jS_g7j7iPBUqCIO/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/AVvXsEjJL-cTOVSfAZlVMP5-H_8nc1oQW-HyA8btu__EQljnBCk5S3AqqheCCW6Q3S8NSI2PQq2Fx0dWo_w-o7vVMy8892ufLYH_AK0Pu1Sy09k6OA3J1FqAQDI2zM6pR_pgGSC5a7YtTgvT0YDV/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/AVvXsEgXTb7_RSiA05TexKdyQwpNYeeOabrbAsEnMQpU_E70FFJJv0ykpRjvE2cIM24YEcKLObN5GENVTAohKeTGfDGnZOLQ1ebNWHLZNShIFQBg0KAiRj1qT0841nBmOB5ubA7sKpToz-BGP39g/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/AVvXsEg9y4ROhOQ52pzzvoUloviyr4dINIDTm4RqHfc8zqaibb6mcG-ME898964SmtWgbzzuFHlgW9F5A6-WeEPDhoh0XLSspH5gqz9nlpFCO8jwcLCND6iFyov6sw89XnZSQ5sj7AdvSRW3snrE/s1600/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

2. Sunrise Gloss Drop Down Menus

HTML CODE:

<div class="nav-container-outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNpIzCD_QRtlDCvkyaD3rccoJQP75J7yjZBzs189LHeY52BJEY3g6zYdBJgCnzAiZ9NS9SxbDi9Lofx-W3uIIIdH7cswIReqyMmeZ54WSP08HMQWUHnttsfGP3a3FrXTlwbsM05RuFGcjQ/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheeAV1q315M7GMq0aDLMC2aj_5zultJ_nVO7heGaXd6sBybtJ_S_XT33svMrbB5IfuIQN8sB6DB5d9yw1srZMYKojaTzpTRbJ5JAaeqHvOnzgVSIi9VCRQzt-tat4yGx7yElY0foQ-qkay/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/AVvXsEiVHyDhenljYa5xGdteddOBASKGg7hJnjqIpOj9en4K5kLRkr9pBTs3Oegd4nerUvEvj_Vdv4o92Evs3F0KMuHkcy1-5IvAUNkKtoK_fdw12Le5-aWfbSXXCWgiMwF_RNeKQe9GMEfp1XUZ/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/AVvXsEikpohB4V3DoNolpl7JVu3J8E9peTbxpoKm1NodXPXHvgQ662CLMB1NvgcmLW4qESnEiV2NxDZYdr3azNUJlmyh8Y2TjBzHWmKh-nBgF47ydiZT5bF-Vxm2UDf8gNMCsH9ATov5lHmKwlNY/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/AVvXsEikpohB4V3DoNolpl7JVu3J8E9peTbxpoKm1NodXPXHvgQ662CLMB1NvgcmLW4qESnEiV2NxDZYdr3azNUJlmyh8Y2TjBzHWmKh-nBgF47ydiZT5bF-Vxm2UDf8gNMCsH9ATov5lHmKwlNY/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/AVvXsEg46-IGaV3KNJFAAp03Xr1fyc56UFSZ_R7DqmDegNMyRoYbvKGCamFZybkep19LHGB-sp7km-MBx7P9qOPIrxR53WQqTGMp0H7C3vvSm0CnvuvNXv2uEzDSitrq-OTbj5fdTEkZ4faVJDdS/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/AVvXsEjelIFHW4owgIb2Pxv09Xu0sZkLcFNU2tIj1azgPKLN9YFpQsbYqRU4FaIr8XvrtoEGzSYSnrM8JiBElD64jhGRL_KeD7ciFLZyWvtkflDmxHTYbCjwsdDbGBXk-say_71DDOn3hlU_Cx_x/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/AVvXsEjelIFHW4owgIb2Pxv09Xu0sZkLcFNU2tIj1azgPKLN9YFpQsbYqRU4FaIr8XvrtoEGzSYSnrM8JiBElD64jhGRL_KeD7ciFLZyWvtkflDmxHTYbCjwsdDbGBXk-say_71DDOn3hlU_Cx_x/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/AVvXsEi1e8jYQ_bIhAgVG9FyAjuKyaTqgrhCOI1T6RHeEz_9oNF4luzT_TvGBryDwm_Bz3p55_2Nrp4Gmc0pY1UWenkiWdofhQIrgdcMGceUaLGcspsmRauvqMHq3M8eqSrMLZKdYbpplTPNI_gm/s1600/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

3. Blue Dawn Drop Down

HTML CODE:

<div class="wrapper1">

<div class="wrapper">

<div class="nav-wrapper">

<div class="nav-left"></div>

<div class="nav">

<ul id="navigation">

<li class="active">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Home</span>

<span class="menu-right"></span>

</a>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Blog</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Archives</a>

</li>

<li>

<a href="#">Categories</a>

</li>

<li>

<a href="#">Top-rated Posts</a>

</li>

<li>

<a href="#">Most-viewed Entries</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Development</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Wordpress Themes</a>

</li>

<li>

<a href="#">Wordpress Plugins</a>

</li>

<li>

<a href="#">Mac OS X</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Tutorials</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Photoshop</a>

</li>

<li>

<a href="#">Illustrator</a>

</li>

<li>

<a href="#">Css, Html</a>

</li>

<li>

<a href="#">Post Your Tutorial!</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Gallery</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Personal Photos</a>

</li>

<li>

<a href="#">My Friends</a>

</li>

<li>

<a href="#">Tech</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Portfolio</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">My Works</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="last">

<a href="">

<span class="menu-left"></span>

<span class="menu-mid">Contact</span>

<span class="menu-right"></span>

</a>

</li>

</ul>

</div>

<div class="nav-right"></div>

</div>

<div class="content">

<p> </p>

<p> </p>

</div>

<div class="content-bottom"></div>

</div>

</div>

CSS CODE:

.wrapper1{

color: #44433f;

font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;

margin: 0;

padding: 4px 0 0;

}

.wrapper1 a{

color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ_Og-NkkFQMKwBAjixZoLRbSFYrOvcEAC9iacEpFkbkX944h9Tvcga0t2i5ExTPs9QexB6L5sGdYN7znBwkG7H1XdTTtEpI9iw0c3WEhxjm9EFZu0qszAXtHdYiJNLjLPkY1t2w6BH40f/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/AVvXsEj2lFy2zxdSyuuCayMLmQqKKOIQlYUguX6c6hVmSsKJwA1dTIohdpJjQLa8apIczzGElAa5oZyMkyugVp1g-hhiOivtp5948y7Q__dSpgbEJ1yos3P95zbcoP4WkkQWpHMk4RJK5nNsEgSI/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/AVvXsEhUs-cyTJbFMeQAZpY9YHA7eqhJliSlnsRh_VwZPhAnXdGAd3FJ3mA263MFUtfCH5PsMpMfKJtKg-0u9_zGElIUR8uYy_CU-jK-Hxuv8HYjXrle5uANj85T1tdtSsjJIiTZYFLcdYzQKMH2/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/AVvXsEjrRAqIaq7TxxXmtdhpWXgNN6KXUp3wynjbbWAh8vcHsB64mzVMw56YBGYyZvAafnOYQGwfvsF3mxSx4IdilQ2mM18HA_Na1hYb3h_CfN9jTusdYxHY2APmOwBKCGz0ljg3UrHytGS6lGtx/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/AVvXsEgxd0POpgQN1tr6nPMzro-PWJfGyqOxgxI2xHT5n5gTEnkylS2O17EuvbQhioQAjLqwpvhxhOALCuEYqt6WQxIvKPXodyDTyCyp4QiMI_gc2Z7qB-jeujErIEbhe_OO4FgX4rDG2w9OaLJb/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/AVvXsEhP3dcifjdhiMpzazgWu5nlvCuVBSdXIutQHK27TALOGwfPGxijgmTKBObDwaiVRR5eDwFYVDzwidkVD8Gexi8luu4f1LnPimIlT6nmLn9Qnb-paei_7wN5zAehq1bwpj7-AJJg6oMn867k/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/AVvXsEiBBrNoMEZ7JOlrQSX8IE-siJ2K_N4SZJBUi5Tt-m7o6iAzrE_q6cVgR1lF4VxmVIhCntzJDWN7dUY4jf73XOPBR7YkdUv38SU0_tNybD9IogYJ6dlupWtXpG8xfH-qq_wheauWH630Ja0y/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/AVvXsEhMxkVh82zU5Hjughb5VFdcDDGpUczVDLzcIkTMa6SRb7dayWdFneHF7aUFIkEnxYc-WzqB7H-gnhC9R5i1LuZAbFBv9A2n4PZWwpfL02SNax-KazpD4RAXN5XBGcBdBySx_hBdSN6K1BvP/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJanaa8NKrjS1kHvTHfqQF9HhJ_GcYcqT6GWa0IjFAzEgDsKFfPpFalk6EfZQYFmlB4dtxkdZIrzpHgKLaHDQCg-_DVVWFB4QMnmc-52l0LBFXAb1CflH0ZsoMootWEFxBIVtHJBhTuCt/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/AVvXsEgncGZ2-EsnZe4RGHvKQOWDLlqZzv_cPMvnL-lGHTJ0QQ6pc3FDHxVUHOeq5EnqLg7g41Ozqv4NjmvUgQY_BpRfcC14j_3fdKWo5vOv9V4-z9h8ZrMmkKdLHza3oBQdNA8wwox5AHxrVYNE/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/AVvXsEg_Uvl7ACLGxYT9bMe1kqg3qrRb66qeAhmK0Pvm040A6-n7GMcx94MJCktB3o3Gle-h9Wdpwwq155lQHvo5QKGZcb0Pq-Vcp0ykU3XAEG8XkuukFsEJrnfLMt2ERtmFGzHl7uYERYndH5xo/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/AVvXsEgj6_rWbbbiRDzuZQMwHMrkg7_rnSXvz9O4g1D_LGvwF44vS6Ft6cXfaQ3OytV_G39TQ1EwQCzSLw0wj9xPWEJMOr8jGE8v-W5EkcFGSiB8o9gWOuzGgaB495zp9LfoapHk12J69LYOvnXV/s1600/content_bottom.png) no-repeat;

height: 13px;

float: left;

}

4. Blue Center Drop Bar

HTML CODE:

<div class="nav">

<div class="table">

<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</div>

</li>

</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

</ul>

</div>

</li>

</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

</ul>

</div>

</li>

</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

</ul>

</div>

</li>

</ul>

</div>

</div>

<br />

CSS CODE:

.nav {

height:35px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbLjeHoXmaWxuA_qiin9VHhtzokwLQ6gWeKdTh4CyK3aLAl6qbokraxpvrN0J8yAmCm5hTxkLH9EssTeuSBS80bAQPivrsYUgDpb9bIH8uPfA78i2x2QVTAMh2TIfEOZ1imS6r1Wj_0OpD/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/AVvXsEjbLjeHoXmaWxuA_qiin9VHhtzokwLQ6gWeKdTh4CyK3aLAl6qbokraxpvrN0J8yAmCm5hTxkLH9EssTeuSBS80bAQPivrsYUgDpb9bIH8uPfA78i2x2QVTAMh2TIfEOZ1imS6r1Wj_0OpD/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/AVvXsEhtxmoUD6VBMkZEz-ukOQArD_OpsBmT_fKyVTm1pQTJ_9o0UuRN0RUFGgX4l9Ioj3w5dJfOurWMhgKj0OwQ0sXNkgo0Fb0oMwS5K5O1xE3Osr6T4rL4EjixUGqb87G_kiESqH2uS1Jfu1Jp/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/AVvXsEhtxmoUD6VBMkZEz-ukOQArD_OpsBmT_fKyVTm1pQTJ_9o0UuRN0RUFGgX4l9Ioj3w5dJfOurWMhgKj0OwQ0sXNkgo0Fb0oMwS5K5O1xE3Osr6T4rL4EjixUGqb87G_kiESqH2uS1Jfu1Jp/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/AVvXsEjjTSHFYPVlWJW0NTnNODQScP_Ea4Z_xAVrmQsfBrqnAS812vzbKJk0Kud-okwlK8vkSGXIwwRjDGL3NgGbevjYdgoQag4WOA7qn95kcK88YRWPLMeNJd_WIhNrNsIvrUAD6PAWie4warI8/s1600/back.gif);

padding:0;

z-index:100;

left:0;

text-align:center;

}

.nav .current .show {

z-index:10;

}

.nav .select :hover .sub li a,

.nav .current .show .sub li a {

display:block;

float:left;

background:transparent;

padding:0 10px 0 10px;

margin:0;

white-space:nowrap;

border:0;

color:#2b3238;

}

.nav .current .sub li.sub_show a {

color:#2b3238;

cursor:default;

}

.nav .select .sub li a {

font-weight:normal;

}

.nav .select :hover .sub li a:hover,

.nav .current .sub li a:hover {

visibility:visible;

color:#73a0d2;

}

5. Blue Impression Drop Down Menu

HTML CODE:

<ul class="menu">

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Wr3LB1qwfGDXx7yLthL2cqoYRPEC4usSNGkCbdnajjMNIyFldOjN2X2iY0ugnSthDlOFVgSLlrGvvkyP-8y_SKOl2itx3hhICwj1yEOVthkklzV6n1osmaBi8waN1g52ecBdlQJtK8Mt/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/AVvXsEjbtjSSBE1AQZ5mAPMmJsJGL5GakIIIqtx3Bb8of32Izn1KBbjCpy-itJpgzaXBDRIXnEsnr0fc7b0n9q9PIjJzsDb2QKfhpUs9vEJtlXQppu_uOXXff9eUNhcb9XUI2rzddkeaAKlVpRQB/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/AVvXsEhg1FSp2oJyFakSm11gHBueRnwtII6C1vAkjqcEaGxykv5ODLXSEcdhTFCrukHmiRrUN3-kxZPADU3E6lwauGsDuo5ujtAYe6BhIup3Q-e0_KLJ_r_pHX8aLaRXNKwU9z9J0FU5J5szYegO/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwWmFnmxnaU_kp64ISCmVLhh31YUy700_5_KHoFKAQwh4fghkZuf-tkOE69n13NZDtLlahsSUfippwH9TZHcL1wW9iwY_AD3tfyoku5aHUFDQAk_ie4KKxRaeiXYok4iZJ6NLQ_4AxvDma/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/AVvXsEhrC6WSyjULnq-TaodJTX2t5zYRIkoWUy7wSlqHSIdKisJHz2ZpFexfVlFBD71Sy5-dF0JjVp_4QH9U5wQ57QTj3_u9bwuTyHt_o6HxqGzv49eVAioF8xK1i7mksXg4k8Ki5hveHOV4KcTq/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/AVvXsEi74L7dVaYYl8t7pv0vnBbXvCcJEHowcroJjOPfSyvY832IwQGQG-FQVjf34wNzk0I-pvscWu50nGvPEtmT3ZfFqhUS_WNeJ3c4n4LDEY5_b9wrUS_tGBxxhcO39AaIMakaVgjl0v5haXL-/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/AVvXsEi74L7dVaYYl8t7pv0vnBbXvCcJEHowcroJjOPfSyvY832IwQGQG-FQVjf34wNzk0I-pvscWu50nGvPEtmT3ZfFqhUS_WNeJ3c4n4LDEY5_b9wrUS_tGBxxhcO39AaIMakaVgjl0v5haXL-/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,

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

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

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

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

6. Green Impression Drop Down Menu

HTML CODE:

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsoDdlRuhPNZ8XauDmN1lhkIgmfFS5ZK0OS16mpDWOyPrcLgQ9K_rhffREb14tAsdueR6REZHgvdq2xcLMF1R4WGEUZSAYoc9UgVGkbR3gbKncxMF4w520js6TYAL8kcZJR-RHA4IKlwiU/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/AVvXsEhf0E4lbkxe3rI1R-ZdFw3LXOsLfBTnpDEwyOgVigQvVn1yb8jFoPBZsibUYE-c23V3bRRMh4IJZFsqbP11YJWjxNLqWxLLCWtgdoRBV24acLkfHLA-rOzc5Kl664OhMd7sqV3uKRziYXlK/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/AVvXsEhmOVYyrmp9ADky4cK8xByj_NdDPiU2DPI6iJeLwoVTcytHqMRsJMt_-0Hwi4CyKTZyTsUdF3C2FR1A_ruIpkpnbzH_gghhEWCztk69rBM7P2AkXPtQ04JthBV6NvDnYD4NLM5V9KwnRZbU/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFzUDkWCSr7SPVWUedJ5OcVUad4l8v9qIPsCcE771QUixCITtVWhoYPyXpAU4s_hEo6N-xMxyX4QutkoK4xulqitp80y92KIVEZkC_b5nMwcTsxoV8nGbjJidvB5gvUjZf9FJNvvNKc4U/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/AVvXsEjT-E-HpM8MAAdIl2b5KjT1_VyRPyMRcx-zF0pyunGA-tq3V8T3E8mW4C40dWzjLnyxD6y7DxZj1cbZfpFz8d2K_yH5uWVsYtVt6dHX1ySLZfnqALwDus-7TP9nqVMBXV3Sjtr0rLxquNbi/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/AVvXsEiCxeufyNC6k07OW1xeG1L0WlcEd47huFED8gXzZDLgA1ZWSnIJ5S2jxIqkb1h-AZu0PxLu27vEtz6075gou6ukO9DNsW5fntQlk2EPMyo8qnDrE4y_wZKPsjmyEN6AUb5iXBCxD4X3D8Gq/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/AVvXsEiCxeufyNC6k07OW1xeG1L0WlcEd47huFED8gXzZDLgA1ZWSnIJ5S2jxIqkb1h-AZu0PxLu27vEtz6075gou6ukO9DNsW5fntQlk2EPMyo8qnDrE4y_wZKPsjmyEN6AUb5iXBCxD4X3D8Gq/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,

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

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

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

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

7. Grey Impression Drop Down Menu

HTML CODE:

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYrtkDuembCZPgPSF4ETTn9NtCxrRYT-C5ym_LWkws1PVE2lQzDS_jXOzmLn69UQiKNMPRj-asHBWJOKgJxtajIz94iCKu_B6JMLgzr1g1u1XeK3WmzBlwNjaud2QSwB0PcNMyuf1yat8p/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/AVvXsEi9x6H_d-UYBrO-4gsAcjWox_7nSYhIS0Id6CV3WPRjM6vjlaP7OkB5a-rCAyJLbC6-gF6vp0Iuz6YQu-DUBEe1MKm7hoP-_zO4l5IBiadbaw_ibid1HofZS6sYpyEEdDFzIwth_5AZjkBa/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/AVvXsEh5O5b74ao1K80DtRhCVwEtTlV9m2iBDK6SlGDB14X9OQypjmU7livlnnNMra09dDD1NoVlS2dAQTEsnXUMNhYIQ__JKdQKPs3ujk9NHi7HdsHI8EwgVea9s91fAdWtuuU0OH-vHfY__Cyp/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSCYpsctk7Ultwte_0M6ycInOHuIOx7Zq9o34ZukfYTonMBySbAT6x5tg6Rn1MX_mreYQgaRz3_EEySci1-vrDtUaXHQfYYOwnNcCZADW4Xs8FLS5wMNqWcpWhCbxqy1jrIuhGfbmrwCQ/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/AVvXsEiy7WsmsPZ1lcbOBL1yZ-rPdNiFYJ7wkjmNHUcolNqGAOYzljo_9C4xxxdbvZL3NxgYz4NFtFXU0uyFhnWvUzpbcwxxphhwKjS_V3oNTfZMi8UjAabvaivqVYeq8T10dKQpRtXpYTvE7Xa7/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/AVvXsEj97470JeL3jTkz-ZYxmC6d7cVIp82Yd0aYPY-i3REbHXw9iZaP8pwEk7MjXjfjxaRTinchWpksmFEZnC3oGSPrIC4I7LhGwRA3Qy6mygkGw-2IUG6kp2XQSv-pqzeAGYKEmoo7rzAvitlR/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/AVvXsEj97470JeL3jTkz-ZYxmC6d7cVIp82Yd0aYPY-i3REbHXw9iZaP8pwEk7MjXjfjxaRTinchWpksmFEZnC3oGSPrIC4I7LhGwRA3Qy6mygkGw-2IUG6kp2XQSv-pqzeAGYKEmoo7rzAvitlR/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul :hover ul,

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

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

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

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

8. Blue Tabbed Drop Down

HTML CODE:

<div class="menu">

<ul>

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

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipO17ghk6EFDBjPubm3b7_qKOscfo4AfwQpM3iTgRMGG7bT0UArrHfLj3pogBmZj3ENarI7ZPELQ0gmmlrjZ0Ou8XhAya0XYopMQNijzVFvp2pBnasZo_sC5slNvBX4IJbDd0BlZedIQrr/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/AVvXsEiX2txVc8aQgrpztyfWr2GhffmygU3J90NnXrYQ_Ie2OslarHEkXLjf3jfD6mjQDtAOzx8pYGaFHRnDtItG7NlT0gCdOIFlnU2ry_KXgXB_KtYdNuA8Kp-M0JfH-xB1PS1Y5mYDWEvHb2eR/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

9. Yellow Tabbed Drop Down Menu

HTML CODE:

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhR3oMIWg-PoPoNMR9kic9cQ0ur_mmauxaZ-v7AJGEOV1OyIKZtNX5_kov6GkgK2RhctGgyB2mRg8GVylx0y9DSkQnPS8QagnZhUD8TmvrysIUEaa_1fi28i8-fEIcXGDp4ZlPyq0arliT/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/AVvXsEiG3ivlg6kP4HeOwan3f761QyDQnCo6nMry8zD5duCvi2aQfqOQcgWIspJCu__mkouJ_6xxt7k0gArmweyH-7rYiPRYOaXacm8qUJDzuuEn7oXGeIUzFhRlhIIC7zEyDP8jY7pcGU3E7i1Z/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

10. Tabbed Grey Drop Down

HTML CODE:

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwSOHDyHW5iMfA7j60o-_S86ThMVRYGAbKBTCX0rN9FkidqApC77-SO_yv0-WZVJvher7W65dZrJ-mg2U_NHfqnWTejRXi36vDOm7jbFWMic7lBn1Jk5FfkYWQbJtNnrIZkyEBZXCJ6lIc/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/AVvXsEidX_1miXEac1FO76JrY8lWd2ilaWHumqZBe_KP1Gy_Jg2jsECl1YPhrmW_K-R7cyDq6oUegTsNbRFGRhGjlPJ3q57MDKz0xSHvHpQce3zu5Y3IIIWzqY3frkLZcopLrJag3yPEGV17eIZi/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

11. Red Tabbed Drop Down

HTML CODE:

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEhyphenhyphenuhpBrAc5jCNnkYXelSrKPLT228m1A2bAf9SlG1ewv1NCFgsMrt3E5CjR0bqUvojNE6vrCukPGEWSq_BTABapK-q8JV1Eq6JXp1OyyMUGWgz9pQmrFqUVxZBu2R3ymQNZ4RZwyyUv-e/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/AVvXsEiHsKEW-9QJxUIqU54PUE1Wj6LZa2hO5lI0EK9PC3qhqce15_zmOT3h1b4voh5smNB7LVR9RP-D8AHs4QZMwPuWGYVGUuVnJuTjTciQ9Sb2NfskOpmHwGhfGsBAV2-T-n4l9cL8alWTrTMP/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

12. Black Tabbed Drop Down

HTML CODE:

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ8_2XTpUXuxYmtWNQbZv8afGOJlcIPWz3F08_kFIjc4tBUwMGRbavPz0MZm2mINn9GJf4PR92ifvR9_WPikzsiUj0ErqbwQnCfzM0JuEDFapohcIXHu9WJqJ6FA2sgOzwL5bfx2rCH4uB/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/AVvXsEgliHmnLatvRpvZgw4F-bRxSk3-h_3tuXt_vcBEu0vHfLl6zqx6MnRhf9qBtb3kahyphenhyphenfx-SVv7MveDhpwM1dHwJ5arIjQoevn33t8qREZMWA4OHqXbbRglGVzVZyYynL20gnhkwvIR66HUU1/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

13. Orange Tabbed Drop Down

HTML CODE:

CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

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

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZnvaW_zfnguo_u6RaF5dRXP2l-5v3uwzrCv5TCHET_f9Ker8iAOJl8F9bMi4leyK8sgTp734UMCuSP8CEF7BqeqFPL90KwFMozEqGcchwV3eSur-pTtGa7NmRaMfs8GiTr_tV0ww7JnwQ/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/AVvXsEgTF7ELUQ_HsyTRyfAu7oOfybdxw-JiyxZ5Hu6SBzIrZPrWukUGma3vHzUWcNIA-UL6TpiO9diUya56PVUFP6GfRZGVeGnJdwjTeyOlCwPkxB1QJwQpn0air2RSZfKyOy5URJ0YeJVau1cR/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

14. Simple Red Drop Down Menus

HTML CODE:

<ul id="navigation-1">

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

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

<ul class="navigation-2">

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

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

<ul class="navigation-3">

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

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

</ul>

</li>

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

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

<ul class="navigation-3">

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

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

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

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

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

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

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

</ul>

</li>

</ul>

</li>

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

<ul class="navigation-2">

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

</ul>

</li>

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

<ul class="navigation-2">

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

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

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

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

<ul class="navigation-3">

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

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

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

</ul>

</li>

</ul>

</li>

</ul>

CSS CODE:

div#container

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

h1

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

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

p a:link,

p a:visited,

p a:hover,

p a:active

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

ul#navigation-1

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

ul#navigation-1 li

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

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

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

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

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

ul#navigation-1 li ul.navigation-2

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

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

{ display:block; }

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

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

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

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

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

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

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

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

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

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

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

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

{ display:block; }

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

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

{ background:#b9121b; }

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

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

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

{ background:#ec454e; }

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

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

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

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

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

15. Simple Black Drop Down Menus

HTML CODE:

CSS CODE:

16. Simple Blue Drop Down Menus

HTML CODE:

CSS CODE:

17. Simple Green Drop Down Menus

Tips n Tricks

Animated Flash Tag Cloud For Bloggers

Add Twitter official tweet buttons to your blog

Related Post Widget With Thumbnail

Related Post Widget without thumbnail

Related Post Widget For Blogs

How To Add Email Subscription Form Below Your Blogger Post

How to add css/HTML menu to your blogs

17 Horizontal dropdown Css/Html Menu

Make A donation

Labels

Followers

Follow US!!!