BloggerTeacher.com

35+ Drop Down Menu Widget in Blogger Horizontal Menus CSS & CSS3

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a class="external_link" href="http://bit.ly/1fpoo5Q" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" target="_blank"><img alt="Drop Down Menu Widget in Blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilJHe35hKLk7_DkUcLZB7DdukTPDvAuDcrtAyHpGFQN1fUHayheJZxgXkjts5tOOdPiBCi2p04qnWYG4CK4tu681hdtSdlMR1czJJbbZrd59a7Ko5CgVsodsqy2IoHddPyIKe7_JwAC0fi/s1600/Drop+Down+Menu+Widget.png" title="Drop Down Menu Widget in Blogger" /></a></div>
<br />
Drop down Navigation menu is an essential part of any blog or website. 
This is the awesome CSS dropdown navigation menu which is built with 
pure CSS, HTML, CSS3 and images Don’t uses JQUERY or JavaScript. This 
Beautiful drop down menu really great to see in a blog. It helps 
visitors to easily get the required content the whole blog. This new 
pure CSS3 drop down menu widget will make your blog outlook more 
professional. A dropdown widget is a good solution sidebar space saving 
problem slove and easy to install. So let’s get started add dropdown 
menu in blogger.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<span style="color: red; font-size: large;">How To Add Drop Down Navigation Menu In Blogger</span><br />
<br />
Now let's start adding it...  <br />
<br />
<b><span style="color: blue;">Step 1.</span></b> Login to Your Blogger 
Account.Go to your Blogger Dashboard.Click on Layout tab from left pane 
and click on Add a Gadget link. (In The Header Area)<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a class="external_link" href="http://bit.ly/work24" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="345" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Gwo9NECMhqhs_yqttT_HgFXApWC-X94cYAb1cJq-RhlK6J-GMA5ITPo4bsoZ5ijAvJf6Npv2p-7Mo1TiATVz9yUZjCRXL006r6DvZeyTzDOFWNeGsFN9_FkkMojMwSdyf1N2sEEeuK9T/s1600/Blogger+Dashboard,+go+to+Layout+and+click+on+Add+a+Gadget+link.png" width="550" /></a></div>
<br />
<br />
<b><span style="color: blue;">Step 2.</span></b> After click on Add a Gadget link A pop-up box will open now<br />
<br />
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget. <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a class="external_link" href="http://bit.ly/work24" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ274EG4bQ4_D_kzWIHzqaEzL8BIO-U_59BkxX-WOoffmC934o_xqlyYMDm-mc1u8p5tzaTjpR29Bs3gVwF8bbRPHlwnKzLxauCcHwhXjf6-e8oJHhl6QZ8cm_FccxSnSStTQxNDbSssI4/s1600/pop-up+window,+choose+the+HTMLJavaScript+widget.png" width="486" /></a></div>
<br />
<br />
<b><span style="color: blue;">Step 3.</span></b> Select 'HTML/Javascript' and add the one of code given below.  <br />
<br />
<br />
<br />
<b><span style="color: blue;">Step 4.</span></b> Now Click On Save 'JavaScript' You are done.<br />
<br />
<br />
<br />
01-Light Opera Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Light Opera Drop Down Menu" border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoN7ssJ-ENyvYQ2-f-nMzw_Ah3AaDSGyhIZYCqqUHLWJcEojhtMGmHc8-0VHH-y_EKLa_gA9x7W2ywB7WFSByq7eUwzqdVlI8Fl_AaPcJC8nl6OE64g7FcG3lPjG_q7TpIyQxNZzFuj7Lw/s1600/01-Light+Opera+Drop+Down+Menu.png" width="292" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/01-Light%20Opera%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu ul,#cssmenu 
li,#cssmenu span,#cssmenu 
a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px
 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 
0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 
0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe
 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 
100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 
100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 
100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu
 ul:after{content:'';display:block;clear:both}#cssmenu 
a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 
0%,#ececec 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe
 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 
100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 
100%);background:linear-gradient(top,#fefefe 0%,#ececec 
100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0
 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > 
ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > 
li > a{color:#000;font-size:12px}#cssmenu > ul > 
li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px
 solid transparent;border-right:10px solid 
transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu 
> ul > li:first-child > a{border-radius:5px 0 0 
0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu 
> ul > 
li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px
 solid transparent;border-right:10px solid 
transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu 
> ul > li.active > a{-moz-box-shadow:inset 0 0 2px 
rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px 
rgba(0,0,0,0.1);box-shadow:inset 0 0 2px 
rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec
 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#ececec),color-stop(100%,#fef 
ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 
100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 
100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 
100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu 
> ul > li:hover > 
a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef
 ef 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#ececec),color-stop(100%,#fef 
ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 
100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 
100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 
100%);background:linear-gradient(top,#ececec 0%,#fef ef 
100%);-moz-box-shadow:inset 0 0 2px 
rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px 
rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu 
.has-sub{z-index:1}#cssmenu .has-sub:hover > 
ul{display:block}#cssmenu .has-sub 
ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu 
.has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li 
a{background:#db000b;border-bottom:1px dotted 
#ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu
 .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub 
.has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub 
ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub 
.has-sub ul li a{background:#a80008;border-bottom:1px dotted 
#ff0f1b}#cssmenu .has-sub .has-sub ul li 
a:hover{background:#8f0007}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li class="has-sub"><a href="#"><span>Product 1</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Product 2</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
02-Animated Drop Down CSS3 :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Animated Drop Down CSS3" border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivXv8f9kAUhFBUOI90gsbplLcaPBUGJj1qEpgFjHOqZrzCXu_ShxOXMbcOXDNN4Glox6_CH4U2NlMz9BajJlTpvpyN2U8GnX44igxs3peMvk4jBXo4TETst9LlmmeLY5SnFK6GsRIheoR3/s1600/02-Animated+Drop+Down+CSS3.png" width="320" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/02-Animated%20Drop%20Down%20CSS3.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu 
ul{margin:0;padding:0}#cssmenu li{margin:0;padding:0}#cssmenu 
a{margin:0;padding:0}#cssmenu ul{list-style:none}#cssmenu 
a{text-decoration:none}#cssmenu{height:70px;background-color:#232323;box-shadow:0
 2px 3px rgba(0,0,0,0.4);width:auto}#cssmenu > ul > 
li{float:left;margin-left:15px;position:relative}#cssmenu > ul > 
li > a{color:#a0a0a0;font-family:Verdana,'Lucida 
Grande';font-size:15px;line-height:70px;padding:15px 
20px;-webkit-transition:color .15s;-moz-transition:color 
.15s;-o-transition:color .15s;transition:color .15s}#cssmenu > ul 
> li > a:hover{color:#fff}#cssmenu > ul > li > 
ul{opacity:0;visibility:hidden;padding:16px 0 20px 
0;background-color:#fafafa;text-align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all
 .3s .1s;-moz-transition:all .3s .1s;-o-transition:all .3s 
.1s;transition:all .3s 
.1s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0
 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px 
rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu > ul 
> li:hover > ul{opacity:1;top:65px;visibility:visible}#cssmenu 
> ul > li > 
ul:before{content:'';display:block;border-color:transparent transparent 
#fafafa 
transparent;border-style:solid;border-width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}#cssmenu
 > ul ul > li{position:relative}#cssmenu ul ul 
a{color:#323232;font-family:Verdana,'Lucida 
Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px 
16px;display:block;-webkit-transition:background-color 
0.1s;-moz-transition:background-color 
0.1s;-o-transition:background-color 0.1s;transition:background-color 
0.1s}#cssmenu ul ul a:hover{background-color:#f0f0f0}#cssmenu ul ul 
ul{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px
 0 20px 
0;background-color:#fafafa;text-align:left;width:180px;-webkit-transition:all
 .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all 
.3s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0
 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px 
rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu ul ul >
 li:hover > ul{opacity:1;left:190px;visibility:visible}#cssmenu ul ul
 a:hover{background-color:#cc2c24;color:#f0f0f0}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Product</span></a><br />
<ul><br />
<li class="has-sub"><a href="#"><span>Product 1</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Product 2</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
03-Colored Tab Dropdown :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Colored Tab Dropdown" border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoDb_kDn-2vuXQS5U-6xH2LZbCxeJDzi5FBrwv5DPCS8fhMZrimMMILF0lz4XVzcJTUJUKxa9S1_-B6P6mTpj9rL782JkKvJLmXGalQf3c_BJd3T0klgpEU1LeBtxYEKoQ3fJkIImdCXKS/s1600/03-Colored+Tab+Dropdown.png" width="398" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/03-Colored%20Tab%20Dropdown.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@charset 
'UTF-8';#cssmenu{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}#cssmenu
 > ul{margin-top:6px !important}#cssmenu 
ul{background:#CDCDCD;background:-webkit-linear-gradient(#cdcdcd 
0%,#e2e2e2 80%,#cdcdcd 100%);background:linear-gradient(#cdcdcd 
0%,#e2e2e2 80%,#cdcdcd 100%);border-top:1px solid 
#A8A8A8;-webkit-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0
 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px 
rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 
2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px 
rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0
 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px 
rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}#cssmenu 
ul ul{border-top:6px solid 
#a80329;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#cssmenu
 ul ul a{line-height:43px}#cssmenu ul ul ul{left:100%;top:0}#cssmenu 
li{float:left;padding:0 8px}#cssmenu li 
a{color:#666;display:block;font-weight:bold;line-height:30px;padding:0 
25px;text-align:center;text-decoration:none}#cssmenu li 
a:hover{color:#000;text-decoration:none}#cssmenu 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;*/}#cssmenu
 li:hover > ul{display:block}#cssmenu li 
li{display:block;float:none;padding:0;position:relative;width:225px}#cssmenu
 li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0
 15px;text-align:left}#cssmenu li ul 
a:hover{background:#949494;color:#000;opacity:1.0;filter:alpha(opacity=100)}#cssmenu
 p{clear:left}#cssmenu .active > 
a{background:#a80329;-webkit-box-shadow:0 -4px 0 #a80329,0 -5px 0 
#b81c40,0 -6px 0 #a80329;-moz-box-shadow:0 -4px 0 #a80329,0 -5px 0 
#b81c40,0 -6px 0 #a80329;box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 
-6px 0 #a80329;color:#fff}#cssmenu .active > 
a:hover{color:white}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li class="has-sub"><a href="#"><span>Product 1</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Product 2</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
04-Black Apple Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Black Apple Drop Down Menu" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqOcqZ6tJ0hEu-8za5TPfNh2FlfFv9TeBUtY8dBu6vR7eRh2lE92rqvzCx9o2h6J1d2gsLw-hTIdd1bhkxF36jEbeosnog9bsHGPN-MJxTyjU6PmpfJ74P7Z2zBW3EjHChQ_RTU4HIzMNG/s1600/04-Black+Apple+Drop+Down+Menu.png" width="359" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/04-Black%20Apple%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu ul,#cssmenu 
li,#cssmenu span,#cssmenu 
a{margin:0;padding:0;position:relative}#cssmenu:after,#cssmenu 
ul:after{content:'';display:block;clear:both}#cssmenu 
a{color:#fff;display:inline-block;font-family:'Lucida Grande','Lucida 
Sans 
Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0
 -1px 0 #333}#cssmenu ul{list-style:none}#cssmenu > ul > 
li{float:left}#cssmenu > ul > li.active a{background:#646464 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxWiYLXA_57ma7OVLQiUTjhyphenhyphenec9Y0LFnqohM_XBKoqMzfZmkDawEqyPz1ZUWoIzcNenN087_WaXzJUjXves_IAgW_IHhCKtG9LdrD2LyWXed466Bi2IoZbxhmjOyvtVfvjSD9A7NtddiV/s1600/grad_dark.png)
 repeat-x left bottom;background:-moz-linear-gradient(top,#646464 
0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464
 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 
100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 
100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 
100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);box-shadow:inset
 0 0 10px #222,inset 0 10px 10px #222;-moz-box-shadow:inset 0 0 10px 
#222,inset 0 10px 10px #222;-webkit-box-shadow:inset 0 0 10px #222,inset
 0 10px 10px #222;filter:none}#cssmenu > ul > li.active 
a:hover{background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464
 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 
100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 
100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 
100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);filter:none}#cssmenu
 > ul > li a{box-shadow:inset 0 0 0 1px 
#8a8a8a;-moz-box-shadow:inset 0 0 0 1px #8a8a8a;-webkit-box-shadow:inset
 0 0 0 1px #8a8a8a;background:#4a4a4a 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxWiYLXA_57ma7OVLQiUTjhyphenhyphenec9Y0LFnqohM_XBKoqMzfZmkDawEqyPz1ZUWoIzcNenN087_WaXzJUjXves_IAgW_IHhCKtG9LdrD2LyWXed466Bi2IoZbxhmjOyvtVfvjSD9A7NtddiV/s1600/grad_dark.png)
 repeat-x left top;background:-moz-linear-gradient(top,#8a8a8a 
0%,#707070 50%,#626262 51%,#787878 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#8a8a8a),color-stop(50%,#707070),color-stop(51%,#626262),color-stop(100%,#787878));background:-webkit-linear-gradient(top,#8a8a8a
 0%,#707070 50%,#626262 51%,#787878 
100%);background:-o-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 
51%,#787878 100%);background:-ms-linear-gradient(top,#8a8a8a 0%,#707070 
50%,#626262 51%,#787878 100%);background:linear-gradient(to 
bottom,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 
100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);border-bottom:1px
 solid #5d5d5d;border-top:1px solid #5d5d5d;border-right:1px solid 
#5d5d5d;line-height:34px;padding:0 35px;filter:none}#cssmenu > ul 
> li a:hover{background:#8a8a8a 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxWiYLXA_57ma7OVLQiUTjhyphenhyphenec9Y0LFnqohM_XBKoqMzfZmkDawEqyPz1ZUWoIzcNenN087_WaXzJUjXves_IAgW_IHhCKtG9LdrD2LyWXed466Bi2IoZbxhmjOyvtVfvjSD9A7NtddiV/s1600/grad_dark.png)
 repeat-x left bottom;background:-moz-linear-gradient(top,#646464 
0%,#4a4a4a 50%,#3b3b3b 51%,#525252 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#646464),color-stop(50%,#4a4a4a),color-stop(51%,#3b3b3b),color-stop(100%,#525252));background:-webkit-linear-gradient(top,#646464
 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 
100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 
51%,#525252 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 
50%,#3b3b3b 51%,#525252 100%);background:linear-gradient(to 
bottom,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 
100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);filter:none}#cssmenu
 > ul > li:first-child a{border-radius:5px 0 0 
5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 
5px;border-left:1px solid #5d5d5d}#cssmenu > ul > li:last-child 
a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 
0;-webkit-border-radius:0 5px 5px 0}#cssmenu .has-sub:hover 
ul{display:block}#cssmenu .has-sub 
ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;/*
 IE7 */ *width:100%}#cssmenu .has-sub ul li{text-align:center}#cssmenu 
.has-sub ul li a{border-top:0 none;border-left:1px solid 
#5d5d5d;display:block;line-height:120%;padding:9px 
5px;text-align:center}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
05-Apple CSS3 :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Apple CSS3" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBgX6RhRQI9W41ywO0F2iKFfikJB-TzNWtncmqMbFMEH4XCVsuSgp5kuAYTyjGXR-0AZ5udPDCMVsJH8dFY8j7PuBFDJVP6WrQ6r5nMnThw-wSGogG8QWMZKcsP5BmguHFvyEURbCoNIfE/s1600/05-Apple+CSS3.png" width="330" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/05-Apple%20CSS3.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu 
ul{margin:0;padding:7px 6px 0;background:#7d7d7d 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFc6ckSdO7x_inafLyfnDwFzDFoYD8XzsEJgfaddpvUt9IBGqJArrsw3mYV4lrMEwdVxE9Ufz34eE03mG9Ul9ZBIWHXvmJ4aq9dtN6QCIPAkDpqbzxO-B0fqotqo5RmnqURs66ucf2fNSm/s1600/overlay.png)
 repeat-x 0 -110px;line-height:100%;border-radius:1em;font:normal 
0.5333333333333333em 
Arial,Helvetica,sans-serif;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0
 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px 
rgba(0,0,0,0.4);width:auto}#cssmenu li{margin:0 5px;padding:0 0 
8px;float:left;position:relative;list-style:none}#cssmenu a,#cssmenu 
a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-decoration:none;display:block;padding:8px
 
20px;margin:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-shadow:0
 1px 1px rgba(0,0,0,0.3)}#cssmenu 
a:hover{background:#000;color:#fff}#cssmenu .active a,#cssmenu li:hover 
> a{background:#979797 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFc6ckSdO7x_inafLyfnDwFzDFoYD8XzsEJgfaddpvUt9IBGqJArrsw3mYV4lrMEwdVxE9Ufz34eE03mG9Ul9ZBIWHXvmJ4aq9dtN6QCIPAkDpqbzxO-B0fqotqo5RmnqURs66ucf2fNSm/s1600/overlay.png)
 repeat-x 0 -40px;background:#666 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFc6ckSdO7x_inafLyfnDwFzDFoYD8XzsEJgfaddpvUt9IBGqJArrsw3mYV4lrMEwdVxE9Ufz34eE03mG9Ul9ZBIWHXvmJ4aq9dtN6QCIPAkDpqbzxO-B0fqotqo5RmnqURs66ucf2fNSm/s1600/overlay.png)
 repeat-x 0 -40px;color:#444;border-top:solid 1px 
#f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 
1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px 
rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenu ul ul li:hover 
a,#cssmenu li:hover li 
a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none}#cssmenu
 ul ul a:hover{background:#7d7d7d 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFc6ckSdO7x_inafLyfnDwFzDFoYD8XzsEJgfaddpvUt9IBGqJArrsw3mYV4lrMEwdVxE9Ufz34eE03mG9Ul9ZBIWHXvmJ4aq9dtN6QCIPAkDpqbzxO-B0fqotqo5RmnqURs66ucf2fNSm/s1600/overlay.png)
 repeat-x 0 -100px !important;color:#fff 
!important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0
 1px 1px rgba(0,0,0,0.1)}#cssmenu li:hover > 
ul{display:block}#cssmenu ul 
ul{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFc6ckSdO7x_inafLyfnDwFzDFoYD8XzsEJgfaddpvUt9IBGqJArrsw3mYV4lrMEwdVxE9Ufz34eE03mG9Ul9ZBIWHXvmJ4aq9dtN6QCIPAkDpqbzxO-B0fqotqo5RmnqURs66ucf2fNSm/s1600/overlay.png)
 repeat-x 0 0;border:solid 1px 
#b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0
 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px 
rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3)}#cssmenu ul ul 
li{float:none;margin:0;padding:3px}#cssmenu ul ul a,#cssmenu ul ul 
a:link{font-weight:normal;font-size:12px}#cssmenu 
ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}*
 html #cssmenu ul{height:1%}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
06-Red & Grey Rough Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Red & Grey Rough Drop Down Menu" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT79R5C3cky42OhyphenhyphenA2SWUQBQCpebcYiPPYA61qlJmf5HmZLQ4Qc-14E1bsC54hD0uwABQXB9e6qdOBYIDJowKaugfnKZFLSWK7s8Mrn42nBiXJAw1FFnI7qM_wQQOozK0UWA6FT-95js0O/s1600/06-Red+&+Grey+Rough+Drop+Down+Menu.png" width="362" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/06-Red%20%26%20Grey%20Rough%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS 
*/#cssmenu,#cssmenu > 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQYyz92fHRJ_wlgJkeGxuamW_P8oWlKJAb_InQstSfwok1Lz57jZl5WdEXzz3d_tWt1nbIPyps-4BXXJ0sA2cIMwaIH6rStr-2suXILOBTd5P_jYeQOU6b8kpFz264ZS3mfIEnFhl1DJi/s1600/highlight-bg.png)
 repeat;padding-bottom:3px;font-family:'Open 
Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu
 > ul:before,#cssmenu > 
ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoJAFHKJKAk9_qdlhDRSt9XAhSEmnGXVnuFZ7l9L-iVeSF4YQ6_aBWb1r5LsGk7KNLUaYVC9Xusvg_SHcal16z8J6gvQa4LHi_rQPUG0vWEJISaWUbT79BxZ-G5Q0WBnv36xlUGOU9H47j/s1600/menu-bg.png)
 repeat;margin:0;padding:0;position:relative}#cssmenu > ul 
li{margin:0;padding:0;list-style:none}#cssmenu > ul > 
li{float:left;position:relative}#cssmenu > ul > li > 
a{padding:23px 
26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0
 -1px 0 #9e3825;text-shadow:0 -1px 0 
rgba(116,37,2,0.7);line-height:18px}#cssmenu > ul > li:hover > 
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDd4aqC1lBGbhmo8aznsdFJjW9AcGqaaWKqgIgJTG0ZgI7ut4M8PVg3evhknjCa7-4hAK9TxUQ9mGTyw88Wk2qd_hALOgcTiULpddvKlfz0PQ6Y522mtfd81VMChbt3K7-mXBzAsq21t4R/s1600/hover.png)
 repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 
rgba(122,42,26,0.64)}#cssmenu > ul > li > a > 
span{line-height:18px}#cssmenu > ul > li.active > a,#cssmenu 
> ul > li > 
a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEXivJirIcyqfu1bMn8P1Q_s_1RucK51-5E9B3kWGtPO2TAx_kvhtWOAsPDQbaB4xw8bVhYwg96WOjFsezGhi71aE3WjffIFCTYjOzCFD67rmDIBYQCKbcvJQsf0blvo9Ixpm-hOGb7U-j/s1600/active.png)
 repeat}/* Childs */#cssmenu > ul 
ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvQYyz92fHRJ_wlgJkeGxuamW_P8oWlKJAb_InQstSfwok1Lz57jZl5WdEXzz3d_tWt1nbIPyps-4BXXJ0sA2cIMwaIH6rStr-2suXILOBTd5P_jYeQOU6b8kpFz264ZS3mfIEnFhl1DJi/s1600/highlight-bg.png)
 repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover 
ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenu
 > ul 
ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu
 > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu 
> ul ul li a{padding:18px 
26px;display:block;color:#393939;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px
 solid transparent;-webkit-transition:all 0.35s 
ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 
0.35s ease-in-out;transition:all 0.35s ease-in-out;text-shadow:0 1px 0 
white}#cssmenu > ul ul li a:hover{border-left:4px solid 
#de553b;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDd4aqC1lBGbhmo8aznsdFJjW9AcGqaaWKqgIgJTG0ZgI7ut4M8PVg3evhknjCa7-4hAK9TxUQ9mGTyw88Wk2qd_hALOgcTiULpddvKlfz0PQ6Y522mtfd81VMChbt3K7-mXBzAsq21t4R/s1600/hover.png)
 repeat;color:white;text-shadow:0 1px 0 black}#cssmenu > ul ul li 
a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoJAFHKJKAk9_qdlhDRSt9XAhSEmnGXVnuFZ7l9L-iVeSF4YQ6_aBWb1r5LsGk7KNLUaYVC9Xusvg_SHcal16z8J6gvQa4LHi_rQPUG0vWEJISaWUbT79BxZ-G5Q0WBnv36xlUGOU9H47j/s1600/menu-bg.png)
 repeat}</style><a href="http://24work.blogspot.com/" 
rel="dofollow" target="_blank" title="Drop Down Menus"><img 
src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="CSS Drop Down Menu"><img 
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Pure CSS Dropdown Menu"><img 
src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
/></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
07-Apple Light Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Apple Light Drop Down Menu" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq2keq1bRxA1VTzqX5Kx49vPFcHTNnRjnxT-lmTGQNwQmcMWGSkWdIYpetSfupBv-WPLCdMvBEiCjXeDFKXuE9BOf-gdaV8fa4teT4lQ25evAd_4aUH0EdPayvGozsVvzsgOxo5EfRFXnZ/s1600/07-Apple+Light+Drop+Down+Menu.png" width="391" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/07-Apple%20Light%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu ul,#cssmenu 
li,#cssmenu span,#cssmenu 
a{margin:0;padding:0;position:relative}#cssmenu:after,#cssmenu 
ul:after{content:'';display:block;clear:both}#cssmenu 
a{color:#333;display:inline-block;font-family:'Lucida Grande','Lucida 
Sans 
Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0
 -1px 0 #eee}#cssmenu ul{list-style:none}#cssmenu > ul > 
li{float:left}#cssmenu > ul > li.active > a{background:#d9d9d9 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVSz5R79U9667yaRfb74PoNIRwita3-c9wltFGFspDqDBwemwR2GjR-L2wtPJf_gm-nO3PQUx34QUgQ4-upf8fgnIsR8yYa6q_1Qg3RP7svpfcE0ihroXK5wbCHUwISLvyPT04Q4MiayT/s1600/grad_light.png)
 repeat-x left bottom;background:-moz-linear-gradient(top,#d9d9d9 
0%,#bfbfbf 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));background:-webkit-linear-gradient(top,#d9d9d9
 0%,#bfbfbf 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 
100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 
100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 
100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);box-shadow:inset
 0 0 10px #979797,inset 0 10px 10px #979797;-moz-box-shadow:inset 0 0 
10px #979797,inset 0 10px 10px #979797;-webkit-box-shadow:inset 0 0 10px
 #979797,inset 0 10px 10px #979797;filter:none}#cssmenu > ul > 
li.active a:hover{background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf
 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));background:-webkit-linear-gradient(top,#d9d9d9
 0%,#bfbfbf 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 
100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 
100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 
100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);filter:none}#cssmenu
 > ul > li a{box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset
 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px 
#fff;background:#bfbfbf 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVSz5R79U9667yaRfb74PoNIRwita3-c9wltFGFspDqDBwemwR2GjR-L2wtPJf_gm-nO3PQUx34QUgQ4-upf8fgnIsR8yYa6q_1Qg3RP7svpfcE0ihroXK5wbCHUwISLvyPT04Q4MiayT/s1600/grad_light.png)
 repeat-x left top;background:-moz-linear-gradient(top,#fff 0%,#e5e5e5 
50%,#d7d7d7 51%,#ededed 100%);background:-webkit-gradient(linear,left 
top,left 
bottom,color-stop(0%,#fff),color-stop(50%,#e5e5e5),color-stop(51%,#d7d7d7),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#fff
 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 
100%);background:-o-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 
51%,#ededed 100%);background:-ms-linear-gradient(top,#fff 0%,#e5e5e5 
50%,#d7d7d7 51%,#ededed 100%);background:linear-gradient(to bottom,#fff 
0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 
100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);border-bottom:1px
 solid #d2d2d2;border-top:1px solid #d2d2d2;border-right:1px solid 
#d2d2d2;line-height:34px;padding:0 35px;filter:none}#cssmenu > ul 
> li a:hover{background:#fff 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVSz5R79U9667yaRfb74PoNIRwita3-c9wltFGFspDqDBwemwR2GjR-L2wtPJf_gm-nO3PQUx34QUgQ4-upf8fgnIsR8yYa6q_1Qg3RP7svpfcE0ihroXK5wbCHUwISLvyPT04Q4MiayT/s1600/grad_light.png)
 repeat-x left bottom;background:-moz-linear-gradient(top,#d9d9d9 
0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#d9d9d9),color-stop(50%,#bfbfbf),color-stop(51%,#b0b0b0),color-stop(100%,#c7c7c7));background:-webkit-linear-gradient(top,#d9d9d9
 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 
100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 
51%,#c7c7c7 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 
50%,#b0b0b0 51%,#c7c7c7 100%);background:linear-gradient(to 
bottom,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 
100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);filter:none}#cssmenu
 > ul > li:first-child a{border-radius:5px 0 0 
5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 
5px;border-left:1px solid #d2d2d2}#cssmenu > ul > li:last-child 
a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 
0;-webkit-border-radius:0 5px 5px 0}#cssmenu .has-sub:hover 
ul{display:block}#cssmenu .has-sub 
ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;*width:100%}#cssmenu
 .has-sub ul li{text-align:center}#cssmenu .has-sub ul li a{border-top:0
 none;border-left:1px solid 
#d2d2d2;display:block;font-size:12px;line-height:120%;padding:9px 
5px;text-align:center}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
08-Silver Salmon Button Dropdown :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Silver Salmon Button Dropdown" border="0" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy97TV9o6VcPVL4m45Zw4VKWOG43IKbC7aW9ZfN8iXWpkjZEBq_w6xXWFcRSNcAj0rMz8qQjS20Ou1KBBF6RCsLuWKCsfkmPUcouM3fZg0kO9BKMakjZimcUOn8QOhikX8PuoyKtohZ2GQ/s1600/08-Silver+Salmon+Button+Dropdown.png" width="381" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/08-Silver%20Salmon%20Button%20Dropdown.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@charset 'UTF-8';/* 
Starter CSS for Menu */#cssmenu{padding:0;margin:0;border:0}#cssmenu 
ul,#cssmenu li{list-style:none;margin:0;padding:0}#cssmenu 
ul{position:relative;z-index:597}#cssmenu ul 
li{float:left;min-height:1px;vertical-align:middle}#cssmenu ul 
li.hover,#cssmenu ul 
li:hover{position:relative;z-index:599;cursor:default}#cssmenu ul 
ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}#cssmenu
 ul ul li{float:none}#cssmenu ul ul ul{top:0;left:100%}#cssmenu ul 
li:hover > ul{visibility:visible}#cssmenu ul ul{margin-top:0}#cssmenu
 a{display:block;line-height:1em;text-decoration:none}#cssmenu ul 
li.last ul{left:auto;right:0}#cssmenu ul li.last ul 
ul{left:auto;right:99.5%}#cssmenu:after,#cssmenu 
ul:after{content:'';display:block;clear:both}/* Custom CSS Styles 
*/#cssmenu{width:auto;font-family:Helvetica,Arial,sans-serif}#cssmenu:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);background-color:#606a77;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#4f5864),color-stop(1,#49515b));background-image:-webkit-linear-gradient(top,#4f5864,#49515b);background-image:-moz-linear-gradient(top,#4f5864,#49515b);background-image:-o-linear-gradient(top,#4f5864,#49515b);background-image:linear-gradient(#4f5864,#49515b);-moz-box-shadow:inset
 0 2px 0 #586270,inset 0 1px 0 #6b7888;-webkit-box-shadow:inset 0 2px 0 
#586270,inset 0 1px 0 #6b7888;box-shadow:inset 0 2px 0 #586270,inset 0 
1px 0 #6b7888;content:'';display:block;height:8px}#cssmenu > 
ul{border-bottom:1px solid #252A30;border-top:1px solid 
#252A30;-moz-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px 
rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px 
rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 #8799a9,0 1px 1px 
rgba(0,0,0,0.5);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);background-color:#566171;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#6e7d8f),color-stop(1,#404854));background-image:-webkit-linear-gradient(top,#6e7d8f,#404854);background-image:-moz-linear-gradient(top,#6e7d8f,#404854);background-image:-o-linear-gradient(top,#6e7d8f,#404854);background-image:linear-gradient(#6e7d8f,#404854);height:27px;padding:15px
 15px 15px 5px}#cssmenu > ul > li{margin:0 10px}#cssmenu > ul 
> li.has-sub:hover > a{-moz-border-radius:3px 3px 0 
0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 
0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}#cssmenu
 > ul > li:hover > 
a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);background-color:#e2e2e2;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#fff),color-stop(1,#c8c8c8));background-image:-webkit-linear-gradient(top,#fff,#c8c8c8);background-image:-moz-linear-gradient(top,#fff,#c8c8c8);background-image:-o-linear-gradient(top,#fff,#c8c8c8);background-image:linear-gradient(#fff,#c8c8c8)}#cssmenu
 > ul > li.active:hover > 
a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);background-color:#cb7b72;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#f49b8e),color-stop(1,#bd584d));background-image:-webkit-linear-gradient(top,#f49b8e,#bd584d);background-image:-moz-linear-gradient(top,#f49b8e,#bd584d);background-image:-o-linear-gradient(top,#f49b8e,#bd584d);background-image:linear-gradient(#f49b8e,#bd584d)}#cssmenu
 ul 
a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);background-color:#c2c2c2;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#f1f1f1),color-stop(1,#a8a8a8));background-image:-webkit-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-moz-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-o-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:linear-gradient(#f1f1f1,#a8a8a8);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:inset
 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px 
rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 
rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px
 0 rgba(255,255,255,0.2),1px 1px 1px 
rgba(0,0,0,0.5);color:#3c444d;font-size:12px;line-height:27px;padding:0 
20px;position:relative;text-align:center;text-shadow:0 1px 0 
rgba(255,255,255,0.4)}#cssmenu ul ul{width:170px}#cssmenu ul ul 
a{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;line-height:150%}#cssmenu
 ul .active > a{color:#FFF;text-shadow:0 1px 0 
rgba(0,0,0,0.4);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);background-color:#c46a60;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#ef7260),color-stop(1,#b04c41));background-image:-webkit-linear-gradient(top,#ef7260,#b04c41);background-image:-moz-linear-gradient(top,#ef7260,#b04c41);background-image:-o-linear-gradient(top,#ef7260,#b04c41);background-image:linear-gradient(#ef7260,#b04c41)}#cssmenu
 ul .has-sub{position:relative}#cssmenu ul .has-sub 
ul{-moz-border-radius:0 3px 3px 3px;-webkit-border-radius:0 3px 3px 
3px;border-radius:0 3px 3px 
3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:0
 2px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:0 2px 1px 1px 
rgba(0,0,0,0.5);box-shadow:0 2px 1px 1px 
rgba(0,0,0,0.5);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC)
 
repeat-x;background-color:#c3c3c3;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#e9e9e9),color-stop(1,#aaa));background-image:-webkit-linear-gradient(top,#e9e9e9,#aaa);background-image:-moz-linear-gradient(top,#e9e9e9,#aaa);background-image:-o-linear-gradient(top,#e9e9e9,#aaa);background-image:linear-gradient(#e9e9e9,#aaa);padding:3px
 0}#cssmenu ul .has-sub ul a{background:none;padding:8px 8px 8px 
16px;border-bottom:1px solid transparent;text-align:left}#cssmenu ul 
.has-sub ul .has-sub a:after{content:none}#cssmenu ul .has-sub li:hover 
> a{border-bottom:1px solid 
#1D2024;color:#FFF;background-color:#55616f;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#56606f),color-stop(1,#3f4852));background-image:-webkit-linear-gradient(top,#56606f,#3f4852);background-image:-moz-linear-gradient(top,#56606f,#3f4852);background-image:-o-linear-gradient(top,#56606f,#3f4852);background-image:linear-gradient(#56606f,#3f4852);-moz-box-shadow:inset
 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;-webkit-box-shadow:inset 1px 
2px 0 #5c6778,inset 0 1px 0 #4e5866;box-shadow:inset 1px 2px 0 
#5c6778,inset 0 1px 0 #4e5866;position:relative;text-shadow:0 1px 0 
rgba(0,0,0,0.4)}#cssmenu ul .has-sub li:hover > a:after{border-left:0
 
none;background-color:#c35f54;background-image:-webkit-gradient(linear,left
 top,left 
bottom,color-stop(0,#ea5f51),color-stop(1,#a9463b));background-image:-webkit-linear-gradient(top,#ea5f51,#a9463b);background-image:-moz-linear-gradient(top,#ea5f51,#a9463b);background-image:-o-linear-gradient(top,#ea5f51,#a9463b);background-image:linear-gradient(#ea5f51,#a9463b);-moz-box-shadow:inset
 -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 
#ce5448;-webkit-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0
 1px 0 #ce5448;box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0
 1px 0 
#ce5448;content:'';height:100%;width:6px;position:absolute;right:0;top:0}#cssmenu
 ul .has-sub > a{padding-right:0}#cssmenu ul .has-sub > 
a:after{content:'▼';border-left:1px solid 
rgba(100,100,100,0.2);color:#5D6A7A;-moz-box-shadow:-1px 0 0 
rgba(255,255,255,0.2);-webkit-box-shadow:-1px 0 0 
rgba(255,255,255,0.2);box-shadow:-1px 0 0 
rgba(255,255,255,0.2);display:inline-block;font-size:9px;margin-left:5px;text-align:center;height:25px;width:24px;text-shadow:0
 -1px 0 #101417}#cssmenu ul .active > a:after{color:#FFF}#cssmenu ul 
ul a{font-size:12px}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li class="has-sub"><a href="#"><span>Product 1</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Product 2</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
09-Orange CSS3 :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Orange CSS3" border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoOd5mYeZVIqrgQSwyrleG6yTSpUynL60MIPTzsnt9RMlW6cl9-NKekxEybeOJQcAxGhSpKFLZUHGQMiEVTIK2PCzOhwXeubi4aASZjAY1XTiLVPtna0GR4B6-LfAJtz1__9QvPuTGD5W/s1600/09-Orange+CSS3.png" width="396" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/09-Orange%20CSS3.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">/* #F93 *//* #C60 
*/#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida 
Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida 
Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu
 
ul{background:#f93;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset
 0 16px 0 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 16px 0 0 
rgba(255,255,255,0.1);box-shadow:inset 0 16px 0 0 
rgba(255,255,255,0.1)}#cssmenu li{float:left;padding:0 0 0 15px}#cssmenu
 li 
a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0
 25px;text-align:center;text-decoration:none}#cssmenu li 
a:hover{background:#c60;color:#FFF;text-decoration:none;-webkit-box-shadow:inset
 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px 
rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}#cssmenu ul
 li:hover a{background:#c60;color:#FFF;text-decoration:none}#cssmenu li 
ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}#cssmenu
 li:hover ul{display:block}#cssmenu li 
li{display:block;float:none;margin:0;padding:0;width:200px;background:#f93;/*this
 is where the rounded corners for the dropdown disappears*/}#cssmenu 
li:hover li a{background:none}#cssmenu li ul 
a{display:block;height:50px;font-size:12px;font-style:normal;margin:0;padding:0
 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul 
li:hover 
a{border:0;color:#FFF;text-decoration:none;background:#c60;-webkit-box-shadow:inset
 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px 
rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px 
rgba(0,0,0,0.3)}</style><a href="http://24work.blogspot.com/" 
rel="dofollow" target="_blank" title="Drop Down Menus"><img 
src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="CSS Drop Down Menu"><img 
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Pure CSS Dropdown Menu"><img 
src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
/></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
010-Grey Impression Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Grey Impression Drop Down Menu" border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3IfCC3z9KEcCRCUvus5cGmwj6xTMEE9LyLNxm_BReEe4f3I-hbPQo7IlckvtjV_DJ9Ryu7iZT0luuyJOgHhVXRjSWYX9MhTEU2XjqHDDfyghFcLhYBuOugymEcnS_Dg0835rTF3fPfWwJ/s1600/010-Grey+Impression+Drop+Down+Menu.png" width="370" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/010-Grey%20Impression%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style 
type="text/css">#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5%
 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode 
MS','Lucida 
Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu
 
ul{background:#333;height:35px;list-style:none;margin:0;padding:0}#cssmenu
 li{float:left;padding:0}#cssmenu li a{background:#333 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYyL5AQEuDQGjR1qGoXfauVmHBL-VLIvGJpeEgO6oloX9S1pgBkhqvFRU9l-8N3gt3OLk6MLlQ9O6-FKX4rLNbyFO_IKozsLEw2FHK1CQ5bDVZemWu7RA03rXIwh1hJCSQkyUZd1XyTTm8/s1600/seperator.gif')
 bottom right 
no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0
 25px;text-align:center;text-decoration:none}#cssmenu > ul > li 
> a{color:#ccc}#cssmenu ul ul a{color:#ccc}#cssmenu li > 
a:hover,#cssmenu ul li:hover > a{background:#2580a2 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO6tKa03hBvqrAJ5sLbbp0H0s2TH-5eH6kK6z5cU3ei_r4RXoa7AjlthhOmfxosBgVFIqxqZS0xKXlfjmPwcxENO8wXgOej5DdmqDASVtJRFdJmqBFPvtQDV6BZ_xZAx53TsZlBaA3JfZT/s1600/hover.png')
 bottom center no-repeat;color:#FFF;text-decoration:none}#cssmenu li 
ul{background:#333;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu
 li:hover ul{display:block}#cssmenu li 
li{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLG7LoQXqt7gUJgP1wT8h9J9tHvgjt5rX_qBiCbPGDjdtQMBR_4jfnjEPkyAMXv_6ZEUpcOjZR-51FUC6U9WaU8JofmzQXm-WnHjLgveIOZn4N-lcrdzrY9lxniYAZRMRaPzsDWCuKheGW/s1600/sub_sep.gif')
 bottom left 
no-repeat;display:block;float:none;margin:0;padding:0;width:225px}#cssmenu
 li:hover li a{background:none}#cssmenu li ul 
a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0
 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul 
li:hover > a{background:#2580a2 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj1me7pQyG5a_lj5dBJW6A_xzHBMG5VSWEFXrJ2MISDK-UiMCLSs1PZQecKOVvIDXZvfaPolS8nRhQd9D6ihLy5KZb8tKJLGFdkKH6c9YSgSTPzz9c4-SMzw2vcEHipxFKYOf1OP27jhhK/s1600/hover_sub.png')
 center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenu
 p{clear:left}</style><a href="http://24work.blogspot.com/" 
rel="dofollow" target="_blank" title="Drop Down Menus"><img 
src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="CSS Drop Down Menu"><img 
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Pure CSS Dropdown Menu"><img 
src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
/></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
011-Flat Horizontal Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Flat Horizontal Drop Down Menu" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheHcOCdzIPLjGLh1Ob-kwvMdy9bRbty1ME1TYgtBMv5DfMBtUAF9pYYTdCvuKiJ6OOkEqCepnveG6OKcNFq-52DtWDRITkZEeZp-xmDEQYuwe0a8hYnriofy48-Rq1peTkBnFFciJlHSul/s1600/011-Flat+Horizontal+Drop+Down+Menu.png" width="340" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/011-Flat%20Horizontal%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@charset 
'UTF-8';/* Base Styles */#cssmenu > ul,#cssmenu > ul li,#cssmenu 
> ul ul{list-style:none;margin:0;padding:0}#cssmenu > 
ul{position:relative;z-index:597;float:left}#cssmenu > ul 
li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;padding:10px}#cssmenu
 > ul li.hover,#cssmenu > ul 
li:hover{z-index:599;cursor:default}#cssmenu > ul 
ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598}#cssmenu
 > ul ul li{float:none}#cssmenu > ul li:hover > 
ul{visibility:visible}/* Align last drop down RTL *//* Theme Styles 
*/#cssmenu > ul a:link{text-decoration:none}#cssmenu > ul 
a:active{color:#ffa500}#cssmenu 
li{padding:0;color:#000}#cssmenu{font-family:'Lato',sans-serif;width:auto;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;background:#1b9bff;font-size:13px;-moz-box-shadow:inset
 0 2px 2px rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 2px 2px 
rgba(255,255,255,0.3);box-shadow:inset 0 2px 2px 
rgba(255,255,255,0.3)}#cssmenu > ul{padding:0 
5px;-moz-box-shadow:inset 0 -2px 2px 
rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 -2px 2px 
rgba(0,0,0,0.3);box-shadow:inset 0 -2px 2px 
rgba(0,0,0,0.3);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;display:block;float:none;zoom:1}#cssmenu
 > ul:before{content:'';display:block}#cssmenu > 
ul:after{content:'';display:table;clear:both}#cssmenu > ul > 
li{padding:8px 5px}#cssmenu > ul > li > a,#cssmenu > ul >
 li > a:link,#cssmenu > ul > li > a:visited{text-shadow:0 
-1px 1px #004881;color:#fff;padding:7px 
20px;display:block;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}#cssmenu
 > ul > li > a:hover,#cssmenu > ul > li:hover > 
a{background-color:#0082e7}#cssmenu li li 
a{color:#8b8b8b;font-size:13px}#cssmenu li li 
a:hover{color:#5c5c5c;border-color:#5c5c5c}#cssmenu ul ul{margin:0 
10px;padding:0 10px;float:none;background:#efefef;border:2px solid 
#1b9bff;border-top:none;right:0;left:0;-webkit-border-radius:0 0 3px 
3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 
3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 
3px;-moz-box-shadow:0 2px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 
3px rgba(0,0,0,0.2);box-shadow:0 2px 3px rgba(0,0,0,0.2)}#cssmenu ul 
> li > ul > li{margin:0 10px 0 
0;position:relative;padding:0;float:left}#cssmenu ul > li > ul 
> li > a{padding:10px 20px 10px 10px;display:block}#cssmenu ul 
> li > ul > li.has-sub > 
a:before{content:'';position:absolute;top:18px;right:6px;border:5px 
solid transparent;border-top:5px solid #8b8b8b}#cssmenu ul > li > 
ul > li.has-sub > a:hover:before{border-top:5px solid 
#5c5c5c}#cssmenu ul ul ul{width:200px;top:100%;border:2px solid 
#1b9bff}#cssmenu ul ul ul li{float:none}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li class="has-sub"><a href="#"><span>Product 1</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Product 2</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
012-Platinum Tabbed Dropdown Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Platinum Tabbed Dropdown Menu" border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju0FPl1gaY4Da-hV1WImiV1y-rOCy-CxZhnSgjwgnaljpUTtl_2oAA6HvQukadRlfQGdzjc8VNEehFZOdsKYPLWBqJS2duakk3kLAkT7s155CCaUgE_ZNFAqEUslUW8Px7DaSPDVhrfRhx/s1600/012-Platinum+Tabbed+Dropdown+Menu.png" width="336" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/012-Platinum%20Tabbed%20Dropdown%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@charset 'UTF-8';/* 
Starter CSS for Flyout Menu 
*/#cssmenu{padding:0;margin:0;border:0;width:auto}#cssmenu ul,#cssmenu 
ul li,#cssmenu ul ul{list-style:none;margin:0;padding:0}#cssmenu 
ul{position:relative;z-index:597;float:left}#cssmenu ul 
li{float:left;min-height:1px;line-height:1em;vertical-align:middle}#cssmenu
 ul li.hover,#cssmenu ul 
li:hover{position:relative;z-index:599;cursor:default}#cssmenu ul 
ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}#cssmenu
 ul ul li{float:none}#cssmenu ul ul ul{top:1px;left:99%}#cssmenu ul 
li:hover > ul{visibility:visible}#cssmenu ul 
ul{top:1px;left:99%}#cssmenu ul li{float:none}#cssmenu ul 
ul{margin-top:1px}#cssmenu ul ul li{font-weight:normal}/* Custom CSS 
Styles */#cssmenu:after,#cssmenu 
ul:after{content:'';display:block;clear:both}#cssmenu 
a{color:#333;display:inline-block;font-family:'Lucida Grande','Lucida 
Sans 
Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;padding:0 
20px;text-align:center;text-decoration:none}#cssmenu 
a:hover{background:#f6f6f6;border-radius:4px 4px 0 
0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 
0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px 
rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px 
rgba(0,0,0,0.1);position:relative;top:0}#cssmenu 
ul{background:#e5e5e5;border-radius:5px 5px 0 0;-moz-border-radius:5px 
5px 0 0;-webkit-border-radius:5px 5px 0 0;list-style:none}#cssmenu > 
ul{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWN4+vQpEwMDAxMDAwPT////4exBIgYA2loa5nAttNYAAAAASUVORK5CYII=)
 100% 100%;background:-moz-linear-gradient(top,#e5e5e5 0%,#ddd 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#e5e5e5),color-stop(100%,#ddd));background:-webkit-linear-gradient(top,#e5e5e5
 0%,#ddd 100%);background:-o-linear-gradient(top,#e5e5e5 0%,#ddd 
100%);background:-ms-linear-gradient(top,#e5e5e5 0%,#ddd 
100%);background:linear-gradient(#e5e5e5 0%,#ddd 100%);box-shadow:0 2px 
2px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px 1px 
rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 2px 1px 
rgba(0,0,0,0.3);padding-top:5px;width:100%}#cssmenu > ul > 
li{float:left;padding:0 10px;position:relative}#cssmenu > ul > 
li:hover > a{background:#f6f6f6;border-radius:4px 4px 0 
0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 
0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px 
rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px 
rgba(0,0,0,0.1);position:relative}#cssmenu > ul > li 
a{line-height:35px}#cssmenu > ul > li 
a:hover{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#cssmenu
 .has-sub:hover ul{display:block}#cssmenu .has-sub 
a{display:block;position:relative}#cssmenu .has-sub > 
a:after{content:'';display:block;width:10px;height:9px;position:absolute;right:5px;top:50%;margin-top:-5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQjdBNUNENDkzMTExRTI4NENBRkFDOUM5MUY0QzI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRCQjdBNUNFNDkzMTExRTI4NENBRkFDOUM5MUY0QzI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEJCN0E1Q0I0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEJCN0E1Q0M0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4qSqkdAAAAtUlEQVR42nyOPQ6DMAyF3bSIKXeplGP0IL1EpU5dkZiQeoDegBt0ZO4BOjORABL5oX4RZCniDZbl99nPh6ZpjkR0pn19TlxclmW7lHOOANZSykue55uQtZbatiXBfdV1Hc3zvAnCY12FUqrm02Xf93/QOI40TdOLmadYZoUxhkIICUKC1hpthRJB3viy8ViMKCR470v23glcdB+GIT7PACEBSauZQN70eBrP4zIn3JC0+j8BBgCxDV02ZQEC4wAAAABJRU5ErkJggg==);-webkit-transform:rotate(360deg)}#cssmenu
 .has-sub ul{background:#f6f6f6;border:1px solid 
#ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:none;padding:10px
 
0;position:absolute;left:50%;top:34px;margin-left:-70px;width:140px;z-index:1}#cssmenu
 .has-sub ul li:hover > 
a{background:#ddd;color:#ae0001;border-color:#e5e5e5 transparent 
transparent transparent}#cssmenu .has-sub ul 
a{line-height:160%;padding:8px 0}#cssmenu .has-sub .has-sub 
a:after{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRkJGQzk4NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRkJGQzk5NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGQkZDOTY0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGQkZDOTc0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6DuTwoAAAAtUlEQVR42nyOsQ3CMBBFj4CVyktkAvZgEJZAoqKNoMoEjMAGzEDnhtKyGztxYzvmznIsIUX5kq2T/rv7fyeE2APAEbb1OeAXGGObVAgBCHxxzk9t265C3ntQSkGD82CMgZTSKkge6pwB7HmXUibn3N/TWif0nsQ0ZbEfxxHmea6XyLTW0jjQl8Gu675o3IqRNU0TxBgf6L0rWHTFuFweAaAESlrMCuJmpNJUni5jwoWSFv8nwAA0tXChxwneNwAAAABJRU5ErkJggg==);-webkit-transform:rotate(360deg)}#cssmenu
 .has-sub .has-sub 
ul{background:#ddd;left:100%;top:0;margin-left:0}#cssmenu .has-sub 
.has-sub ul 
a{background:none;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}#cssmenu
 .has-sub .has-sub ul a:after{background-image:none}#cssmenu .has-sub 
.has-sub ul a:hover{background:#bfbfbf}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li class="has-sub"><a href="#"><span>Product 1</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Product 2</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
013-Blue Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Blue Drop Down Menu" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5Tj4fCPHK9EC0T9HN_oD1KwLOCDgLg_7NVZddRi4Ky7VCbUNkFwl9P5uuNw06alB46mxP8u7zbqu_839RF5dRjcXNSj2gId2cyZUfc3FqWtAGiSrypr17zDD2JqWwQbe0cSLwEc_6FM8/s1600/013-Blue+Drop+Down+Menu.png" width="368" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/013-Blue%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500);/* 
2f4b87 *//* 2f4b87 *//* #1f325d *//* Menu CSS 
*/#cssmenu{width:auto}#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li
 a{padding:0;margin:0;line-height:1;font-family:'Source Sans 
Pro',sans-serif;font-weight:500;font-size:16px;color:#fff;-webkit-transition:all
 ease .3s;-o-transition:all ease .3s;-moz-transition:all ease 
.3s;-ms-transition:all ease .3s;transition:all ease 
.3s}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu >
 ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu a{text-shadow:0 1px 1px 
rgba(0,0,0,0.2)}#cssmenu 
ul{background:#3b5998;border-radius:3px;border:1px solid 
#2b4479;border:1px solid #2d4373;-webkit-box-shadow:0 1px 2px 
rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-o-box-shadow:0 
1px 2px rgba(2,2,2,0.25),inset 0 1px 1px 
rgba(255,255,255,0.15);-moz-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0
 1px 1px rgba(255,255,255,0.15);-ms-box-shadow:0 1px 2px 
rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);box-shadow:0 1px
 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15)}#cssmenu ul
 > li{float:left;list-style:none}#cssmenu ul > li > 
a{display:block;text-decoration:none;padding:15px 
44px;position:relative}#cssmenu ul > li > 
a:hover{background:#2d4373;-webkit-box-shadow:inset 0 0 1px 
#1e2e4f;-o-box-shadow:inset 0 0 1px #1e2e4f;-moz-box-shadow:inset 0 0 
1px #1e2e4f;-ms-box-shadow:inset 0 0 1px #1e2e4f;box-shadow:inset 0 0 
1px #1e2e4f;-webkit-transition:all ease .3s;-o-transition:all ease 
.3s;-moz-transition:all ease .3s;-ms-transition:all ease 
.3s;transition:all ease .3s}#cssmenu ul > li > 
a:hover:before{content:'';z-index:2;position:absolute;border:1px solid 
white;border-top:0;border-bottom:0;border-right:0;width:100%;height:100%;top:0;left:-1px;opacity:.2}#cssmenu
 ul > li > 
a:hover:after{content:'';z-index:2;position:absolute;border:1px solid 
white;border-top:0;border-bottom:0;border-left:0;width:100%;height:100%;top:0;right:-1px;opacity:.2}#cssmenu
 > ul > li > 
ul{opacity:0;visibility:hidden;position:absolute}#cssmenu > ul > 
li:hover > 
ul{opacity:1;visibility:visible;position:absolute;border-radius:0 0 3px 
3px;-webkit-box-shadow:none;-o-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;box-shadow:none}#cssmenu
 > ul > li > ul{width:200px;position:absolute}#cssmenu > ul 
> li > ul > li{float:none;position:relative}#cssmenu > ul 
> li > ul > li > 
ul{opacity:0;visibility:hidden;position:absolute}#cssmenu > ul > 
li > ul > li:hover > 
ul{opacity:1;visibility:visible;position:absolute}#cssmenu > ul > 
li > ul > li > ul{left:200px;top:1px;width:200px}#cssmenu > 
ul > li > ul > li > ul > 
li{float:none}</style><a href="http://24work.blogspot.com/" 
rel="dofollow" target="_blank" title="Drop Down Menus"><img 
src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="CSS Drop Down Menu"><img 
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Pure CSS Dropdown Menu"><img 
src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
/></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li class="has-sub"><a href="#"><span>Product 1</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Product 2</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
014-Rounded Slate Dropdown Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Rounded Slate Dropdown Menu" border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4SxKUjUsilHgGi741LcYq6kAEK4aReVpNl7K0dJLYMWQQhmPUvK6JOGsHTKzhsCaMc7CqmrMkYJO6Zx1D8SzMznAOXTTWhWVhpNtwlxAY-abBQpbH-avmKM5U6FoYSK0lRkHXNkJeTnHA/s1600/014-Rounded+Slate+Dropdown+Menu.png" width="330" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/014-Rounded%20Slate%20Dropdown%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@charset 'UTF-8';#cssmenu
 ul,#cssmenu li,#cssmenu span,#cssmenu 
a{border:0;margin:0;padding:0;position:relative}#cssmenu{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#f2edea
 
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=)
 100% 100%;box-shadow:0 0 2px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 0 
2px 1px rgba(0,0,0,0.15);-webkit-box-shadow:0 0 2px 1px 
rgba(0,0,0,0.15);background:-moz-linear-gradient(top,#f2edea 0%,#c0bebf 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#f2edea),color-stop(100%,#c0bebf));background:-webkit-linear-gradient(top,#f2edea
 0%,#c0bebf 100%);background:-o-linear-gradient(top,#f2edea 0%,#c0bebf 
100%);background:-ms-linear-gradient(top,#f2edea 0%,#c0bebf 
100%);background:linear-gradient(to bottom,#f2edea 0%,#c0bebf 
100%);font-weight:600;height:52px;width:auto}#cssmenu:after,#cssmenu 
ul:after{content:'';display:block;clear:both}#cssmenu a{box-shadow:inset
 0 1px 0 whitesmoke;-moz-box-shadow:inset 0 1px 0 
whitesmoke;-webkit-box-shadow:inset 0 1px 0 
whitesmoke;background:#f2edea 
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=)
 100% 100%;background:-moz-linear-gradient(top,#f2edea 0%,#c0bebf 
100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#f2edea),color-stop(100%,#c0bebf));background:-webkit-linear-gradient(top,#f2edea
 0%,#c0bebf 100%);background:-o-linear-gradient(top,#f2edea 0%,#c0bebf 
100%);background:-ms-linear-gradient(top,#f2edea 0%,#c0bebf 
100%);background:linear-gradient(to bottom,#f2edea 0%,#c0bebf 
100%);color:#666;display:inline-block;font-family:Arial,Verdana,sans-serif;font-size:12px;line-height:52px;padding:0
 28px;text-decoration:none}#cssmenu ul{list-style:none;box-shadow:inset 0
 1px 0 whitesmoke;-moz-box-shadow:inset 0 1px 0 
whitesmoke;-webkit-box-shadow:inset 0 1px 0 whitesmoke}#cssmenu > 
ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > 
li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 
5px;-webkit-border-radius:5px 0 0 5px}#cssmenu > ul > li.active 
a,#cssmenu > ul > li:hover > a{box-shadow:inset 0 -2px 3px 
rgba(0,0,0,0.15);-moz-box-shadow:inset 0 -2px 3px 
rgba(0,0,0,0.15);-webkit-box-shadow:inset 0 -2px 3px 
rgba(0,0,0,0.15);color:white;background:#4a5662 
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkM2QzM1NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDNkM2QzM2NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0M2QzZDMzM0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M2QzZDMzQ0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6bEPV5AAAAUUlEQVR42mSO0RWAMAgDc4znAA7g/jvUFKj66gevCT0COs4rJLkIoSC1X+j+7GFfupj+a4bFu+isydcMr88dY/PkLL8bPnrLXTvHk2NdzC3AAIj5BKfn0x2aAAAAAElFTkSuQmCC);background:-moz-linear-gradient(top,#4a5662
 0%,#606f7f 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#4a5662),color-stop(100%,#606f7f));background:-webkit-linear-gradient(top,#4a5662
 0%,#606f7f 100%);background:-o-linear-gradient(top,#4a5662 0%,#606f7f 
100%);background:-ms-linear-gradient(top,#4a5662 0%,#606f7f 
100%);background:linear-gradient(to bottom,#4a5662 0%,#606f7f 
100%)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > 
ul{display:block}#cssmenu .has-sub ul{box-shadow:0 1px 2px 
rgba(0,0,0,0.15);-moz-box-shadow:0 1px 2px 
rgba(0,0,0,0.15);-webkit-box-shadow:0 1px 2px 
rgba(0,0,0,0.15);display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu
 .has-sub ul li a{background:#606f7f;border-bottom:1px solid 
#59636f;border-bottom:1px solid #556371;box-shadow:inset 0 1px 0 
#606f7f;-moz-box-shadow:inset 0 1px 0 #606f7f;-webkit-box-shadow:inset 0
 1px 0 #606f7f;color:white;display:block;line-height:160%;padding:15px 
10px;font-size:12px}#cssmenu .has-sub ul li:hover 
a{background:#4a5662;box-shadow:inset 0 0 3px 1px 
rgba(0,0,0,0.15);-moz-box-shadow:inset 0 0 3px 1px 
rgba(0,0,0,0.15);-webkit-box-shadow:inset 0 0 3px 1px 
rgba(0,0,0,0.15)}#cssmenu .has-sub .has-sub:hover > 
ul{display:block}#cssmenu .has-sub .has-sub 
ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub 
.has-sub ul li 
a{background:#606f7f;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#cssmenu
 .has-sub .has-sub ul li a:hover{background:#4a5662;box-shadow:inset 0 0
 3px 1px rgba(0,0,0,0.15);-moz-box-shadow:inset 0 0 3px 1px 
rgba(0,0,0,0.15);-webkit-box-shadow:inset 0 0 3px 1px 
rgba(0,0,0,0.15)}</style><a href="http://24work.blogspot.com/" 
rel="dofollow" target="_blank" title="Drop Down Menus"><img 
src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="CSS Drop Down Menu"><img 
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Pure CSS Dropdown Menu"><img 
src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
/></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li class="has-sub"><a href="#"><span>Product 1</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Product 2</span></a><br />
<ul><br />
<li><a href="#"><span>Sub Item</span></a></li><br />
<li class="last"><a href="#"><span>Sub Item</span></a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
015-Blue & Yellow Rough Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Blue & Yellow Rough Drop Down Menu" border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAZbN5Sp3RuVHISZOCJM2XdB2IKoPIuWDTQneo6y9gnSOqqdxM8mOQvDawkfei4awjlb_QH-JzbQy0wYWuWP7tEsEEVhmSFEC9PBirQqQNQ7-C1GzQ8Rty7ZtmdWxRBEHO841RIpJeHa3/s1600/015-Blue+&+Yellow+Rough+Drop+Down+Menu.jpg" width="399" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/015-Blue%20%26%20Yellow%20Rough%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS 
*/#cssmenu,#cssmenu > 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNqtR0rXx8N771KByMM3BfPrQmdTfwacwTgIrVaD3D60SwQAstjsxpkbbSsg2-Cy-IBRrRs6Ta8yQFaFkvWrvPsIs0SFFOmUbbdLtTILDqYlGvQz3Mo3_MlzNs3ei3-YXrg4dX4AYraPui/s1600/highlight-bg.png)
 repeat;padding-bottom:3px;font-family:'Open 
Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu
 > ul:before,#cssmenu > 
ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qMSvhr6zwA8wMZ2ygZsXjLF2uzaUWr4lJo8fbxmpbICnx2YyFTMkNwID3s_EoLdsWa4EpCNibbd7CVuYbf2RLsRmpdrl7MHp7-VXuLa6TsATaS2RN3Ou16jDbb6nnY-VK9HE4GztVWio/s1600/menu-bg.png)
 repeat;margin:0;padding:0;position:relative}#cssmenu > ul 
li{margin:0;padding:0;list-style:none}#cssmenu > ul > 
li{float:left;position:relative}#cssmenu > ul > li > 
a{padding:23px 
26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0
 -1px 0 #c28130;text-shadow:0 -1px 0 
rgba(151,99,33,0.43);line-height:18px}#cssmenu > ul > li:hover 
> 
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugoJeVrIEbKOXpZj2Ls3m-Qc_AvTIBhiLdD3BMGFoW7VWXXLngUYBsoi3moVm2skGTt-T_CDEg_j_F0cNFewbRCKh5oODyRT-scPdOEiUwBeMdcYB2vkQcXoIOjS5l2wKQKEgZ0g_yMkz/s1600/hover.png)
 repeat}#cssmenu > ul > li > a > 
span{line-height:18px}#cssmenu > ul > li.active > a,#cssmenu 
> ul > li > 
a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNqtR0rXx8N771KByMM3BfPrQmdTfwacwTgIrVaD3D60SwQAstjsxpkbbSsg2-Cy-IBRrRs6Ta8yQFaFkvWrvPsIs0SFFOmUbbdLtTILDqYlGvQz3Mo3_MlzNs3ei3-YXrg4dX4AYraPui/s1600/highlight-bg.png)
 repeat}/* Childs */#cssmenu > ul 
ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugoJeVrIEbKOXpZj2Ls3m-Qc_AvTIBhiLdD3BMGFoW7VWXXLngUYBsoi3moVm2skGTt-T_CDEg_j_F0cNFewbRCKh5oODyRT-scPdOEiUwBeMdcYB2vkQcXoIOjS5l2wKQKEgZ0g_yMkz/s1600/hover.png)
 repeat;margin:0;padding:0;z-index:-1;-webkit-transition:all 0.35s 0.2s 
ease-in-out;-moz-transition:all 0.35s 0.2s 
ease-in-out;-ms-transition:all 0.35s 0.2s ease-in-out;transition:all 
0.35s 0.2s ease-in-out}#cssmenu > ul li:hover 
ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenu
 > ul 
ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu
 > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu 
> ul ul li a{padding:18px 
26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px
 solid transparent;-webkit-transition:all 0.35s 
ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 
0.35s ease-in-out;transition:all 0.35s ease-in-out;text-shadow:0 -1px 0 
#c28130;text-shadow:0 -1px 0 rgba(151,99,33,0.43)}#cssmenu > ul ul li
 a:hover{border-left:4px solid 
#055988;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNqtR0rXx8N771KByMM3BfPrQmdTfwacwTgIrVaD3D60SwQAstjsxpkbbSsg2-Cy-IBRrRs6Ta8yQFaFkvWrvPsIs0SFFOmUbbdLtTILDqYlGvQz3Mo3_MlzNs3ei3-YXrg4dX4AYraPui/s1600/highlight-bg.png)
 repeat}#cssmenu > ul ul li 
a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qMSvhr6zwA8wMZ2ygZsXjLF2uzaUWr4lJo8fbxmpbICnx2YyFTMkNwID3s_EoLdsWa4EpCNibbd7CVuYbf2RLsRmpdrl7MHp7-VXuLa6TsATaS2RN3Ou16jDbb6nnY-VK9HE4GztVWio/s1600/menu-bg.png)
 repeat}</style><a href="http://24work.blogspot.com/" 
rel="dofollow" target="_blank" title="Drop Down Menus"><img 
src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="CSS Drop Down Menu"><img 
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Pure CSS Dropdown Menu"><img 
src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
/></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
016-Grey Red Drop Down Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Grey Red Drop Down Menu" border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaX_HjeIJm9Bc3lNz2csoBgN5AaIYovCnXNawrOvcdhQfkPyWYCI2UCC1k47v2-GS9tkQInep79Y2dtaZ4lFcZCd1Z4Tm_oh1h11TcD7ce2QlxRnFEA5W406n_KJm2KEh1xyGwZvhrE7m1/s1600/016-Grey+Red+Drop+Down+Menu.png" width="369" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/016-Grey%20Red%20Drop%20Down%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS 
*/#cssmenu,#cssmenu > 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG9BYCQ5AW9emdu0-nABFVeWx9BtPUyLTjPczBQ89_7V6u2tHgXdz1on3u8_b-3L85MJkrcE8CxtyO45k3PIiW0GoSENiVSCctYEO8CdRKWG0nb5GFYhFVxzhVD7QpQNGu5lgAGDRqKKI/s1600/highlight-bg.png)
 repeat;padding-bottom:3px;font-family:'Open 
Sans',sans-serif;font-weight:600}#cssmenu:before,#cssmenu:after,#cssmenu
 > ul:before,#cssmenu > 
ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu{width:auto;zoom:1}#cssmenu > 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1vM5Yn1FMD4VNDTfkS8JaLoDnhLcCzROS98UzvnB2htFAVaJgyGQgJ853Wb0GRu9ybF1BGMkN-Ewkd835UKeHaN3hbMkqA-22eOaZ_bcbgcauch3dLGWGRg3im08NGrhSPgzsTgYxQWY/s1600/menu-bg.png)
 repeat;margin:0;padding:0;position:relative}#cssmenu > ul 
li{margin:0;padding:0;list-style:none}#cssmenu > ul > 
li{float:left;position:relative}#cssmenu > ul > li > 
a{padding:23px 
26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0
 -1px 0 #0d0d0d;text-shadow:0 -1px 0 
rgba(0,0,0,0.7);line-height:18px}#cssmenu > ul > li:hover > 
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDG9BYCQ5AW9emdu0-nABFVeWx9BtPUyLTjPczBQ89_7V6u2tHgXdz1on3u8_b-3L85MJkrcE8CxtyO45k3PIiW0GoSENiVSCctYEO8CdRKWG0nb5GFYhFVxzhVD7QpQNGu5lgAGDRqKKI/s1600/highlight-bg.png)
 repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 
rgba(122,42,26,0.64)}#cssmenu > ul > li > a > 
span{line-height:18px}#cssmenu > ul > li.active > a,#cssmenu 
> ul > li > 
a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitB1sxT7PdxsOus7czGCZVserSwAU83NI2Sl7tiOrEQ-gtHms9m8eX3sSa9akmrY73Si4v6AfuSI2Dsm1Z5MGFymGpoGYFdKHrpLsE2H9IplulB6GX1vn4CZsTQrTMnKPm5pev_VG26V5l/s1600/hover.png)
 repeat}/* Childs */#cssmenu > ul 
ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1vM5Yn1FMD4VNDTfkS8JaLoDnhLcCzROS98UzvnB2htFAVaJgyGQgJ853Wb0GRu9ybF1BGMkN-Ewkd835UKeHaN3hbMkqA-22eOaZ_bcbgcauch3dLGWGRg3im08NGrhSPgzsTgYxQWY/s1600/menu-bg.png)
 repeat;margin:0;padding:0;z-index:-1}#cssmenu > ul li:hover 
ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenu
 > ul 
ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenu
 > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenu 
> ul ul li a{padding:18px 
26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px
 solid transparent;-webkit-transition:all 0.35s 
ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 
0.35s ease-in-out;transition:all 0.35s ease-in-out}#cssmenu > ul ul 
li a:hover{border-left:4px solid 
#d64e34;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitB1sxT7PdxsOus7czGCZVserSwAU83NI2Sl7tiOrEQ-gtHms9m8eX3sSa9akmrY73Si4v6AfuSI2Dsm1Z5MGFymGpoGYFdKHrpLsE2H9IplulB6GX1vn4CZsTQrTMnKPm5pev_VG26V5l/s1600/hover.png)
 repeat}#cssmenu > ul ul li 
a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1vM5Yn1FMD4VNDTfkS8JaLoDnhLcCzROS98UzvnB2htFAVaJgyGQgJ853Wb0GRu9ybF1BGMkN-Ewkd835UKeHaN3hbMkqA-22eOaZ_bcbgcauch3dLGWGRg3im08NGrhSPgzsTgYxQWY/s1600/menu-bg.png)
 repeat}</style><a href="http://24work.blogspot.com/" 
rel="dofollow" target="_blank" title="Drop Down Menus"><img 
src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="CSS Drop Down Menu"><img 
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Pure CSS Dropdown Menu"><img 
src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
/></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
017-Simple Red :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Simple Red" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP054GMp5FelhVf_9mJ96-zaurHNr2zdJlPNzsxE3yEl_v_hg-t8bSjfDP-8W5yD1Vx6kthIwBdmTbuep4Mn9LNboYPlbmXdk5pGfig-L7JxVpVAD-D90uLD6Rijd26VaXNXXePBdbrMyq/s1600/017-Simple+Red.png" width="294" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/017-Simple%20Red.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu{border:1px solid
 #b9121b;background:#b9121b}#cssmenu > ul{padding:1px 
0;margin:0;list-style:none;width:100%;height:21px;border-top:1px solid 
#FFF;border-bottom:1px solid #FFF;font:normal 8pt 
verdana,arial,helvetica}#cssmenu > ul 
li{margin:0;padding:0;display:block;float:left;position:relative;width:148px}#cssmenu
 > ul li a:link,#cssmenu > ul li a:visited{padding:4px 
0;display:block;text-align:center;text-decoration:none;background:#b9121b;color:#fff;width:148px;height:13px}#cssmenu
 > ul li:hover a,#cssmenu > ul li a:hover,#cssmenu > ul li 
a:active{padding:4px 
0;display:block;text-align:center;text-decoration:none;background:#ec454e;color:#fff;width:146px;height:13px;border-left:1px
 solid #fff;border-right:1px solid #fff}#cssmenu > ul li 
ul{margin:0;padding:1px 1px 
0;list-style:none;display:none;background:#fff;width:146px;position:absolute;top:21px;left:-1px;border:1px
 solid #b9121b;border-top:none}#cssmenu > ul li:hover 
ul{display:block}#cssmenu > ul li ul 
li{clear:left;width:146px}#cssmenu > ul li ul li a:link,#cssmenu >
 ul li ul li a:visited{clear:left;background:#b9121b;padding:4px 
0;width:146px;border:none;border-bottom:1px solid 
#fff;position:relative;z-index:1000}#cssmenu > ul li ul li:hover 
a,#cssmenu > ul li ul li a:active,#cssmenu > ul li ul li 
a:hover{clear:left;background:#ec454e;padding:4px 
0;width:146px;border:none;border-bottom:1px solid 
#fff;position:relative;z-index:1000}#cssmenu > ul li ul 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:#fff;z-index:900}#cssmenu > ul li ul li:hover 
ul.navigation-3{display:block}#cssmenu > ul li ul li ul.navigation-3 
li a:link,#cssmenu > ul li ul li ul.navigation-3 li 
a:visited{background:#b9121b}#cssmenu > ul li ul li ul.navigation-3 
li:hover a,#cssmenu > ul li ul li ul.navigation-3 li a:hover,#cssmenu
 > ul li ul li ul.navigation-3 li 
a:active{background:#ec454e}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
018-Simple Blue :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Simple Blue" border="0" height="114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHdlZ_1xpddu_p3_brXG7FXZcwh4YgDaBjOnBEuTLoLkZBq59cJCW741Z7MFQzGPhgnSXI5c6EBPDIhVZVD4mcKpEkO1Rg8mwW5yXg1AK2XWJkL11X58U1MkQrEAYPL6QkEHSyH3Q9rN1/s1600/018-Simple+Blue.png" width="321" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/018-Simple%20Blue.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu{border:1px solid
 #009;background:#009}#cssmenu > ul{padding:1px 
0;margin:0;list-style:none;width:100%;height:21px;border-top:1px solid 
#FFF;border-bottom:1px solid #FFF;font:normal 8pt 
verdana,arial,helvetica}#cssmenu > ul 
li{margin:0;padding:0;display:block;float:left;position:relative;width:148px}#cssmenu
 > ul li a:link,#cssmenu > ul li a:visited{padding:4px 
0;display:block;text-align:center;text-decoration:none;background:#009;color:#fff;width:148px;height:13px}#cssmenu
 > ul li:hover a,#cssmenu > ul li a:hover,#cssmenu > ul li 
a:active{padding:4px 
0;display:block;text-align:center;text-decoration:none;background:#06F;color:#fff;width:146px;height:13px;border-left:1px
 solid #fff;border-right:1px solid #fff}#cssmenu > ul li 
ul{margin:0;padding:1px 1px 
0;list-style:none;display:none;background:#fff;width:146px;position:absolute;top:21px;left:-1px;border:1px
 solid #009;border-top:none}#cssmenu > ul li:hover 
ul{display:block}#cssmenu > ul li ul 
li{clear:left;width:146px}#cssmenu > ul li ul li a:link,#cssmenu >
 ul li ul li a:visited{clear:left;background:#009;padding:4px 
0;width:146px;border:none;border-bottom:1px solid 
#fff;position:relative;z-index:1000}#cssmenu > ul li ul li:hover 
a,#cssmenu > ul li ul li a:active,#cssmenu > ul li ul li 
a:hover{clear:left;background:#06F;padding:4px 
0;width:146px;border:none;border-bottom:1px solid 
#fff;position:relative;z-index:1000}#cssmenu > ul li ul 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 #009;border-left:1px solid 
#009;background:#fff;z-index:900}#cssmenu > ul li ul li:hover 
ul.navigation-3{display:block}#cssmenu > ul li ul li ul.navigation-3 
li a:link,#cssmenu > ul li ul li ul.navigation-3 li 
a:visited{background:#009}#cssmenu > ul li ul li ul.navigation-3 
li:hover a,#cssmenu > ul li ul li ul.navigation-3 li a:hover,#cssmenu
 > ul li ul li ul.navigation-3 li 
a:active{background:#06F}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li class="has-sub"><a href="#"><span>Products</span></a><br />
<ul><br />
<li><a href="#"><span>Widgets</span></a></li><br />
<li><a href="#"><span>Menus</span></a></li><br />
<li class="last"><a href="#"><span>Products</span></a></li><br />
</ul><br />
</li><br />
<li class="has-sub"><a href="#"><span>Company</span></a><br />
<ul><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Location</span></a></li><br />
</ul><br />
</li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
019-Blue Tabbed Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Blue Tabbed Menu" border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPMBbG_2BRF-t6Fd3LR9DRJ2NNpDMzLar1OvtvM61yty69KwvHu3ViA3OjfBNYfd4j0pFjmP3pu1k0AMpaXY5X8__7qbf3YVDmIpTfinT0Jm-1-4dugxCWjmLBHCMldX-7mEA2STroeWXK/s1600/019-Blue+Tabbed+Menu.png" width="391" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/019-Blue%20Tabbed%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the
 lovely google font,please keep this line at the top of your stylesheet 
*//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li 
a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu
 > ul:before,#cssmenu > 
ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwDNtNJ4wyW_ip0o8_zIAMKrlQiNQ2AFvS07BHWq7R9G6-bHo-wlyTeVKOBTyh-X4VWXHeYXWDyQYuhcTJdprn33l7i3u-KC-Z6q2cnNoATbybuC_LP3q4aJ67Wlk4Z7Ub3QYXkhRSkwB/s1600/bottom-bg.png)
 repeat-x center bottom;border-radius:2px;width:auto}#cssmenu 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijnCz2MH-16fP32DxluR9FWZSzrGrVQcnEQHc-Vaacz5uq9-LxGu9VzqYvsHj1dCZpLqRYto-Oogr5Oj-ipiNOzYoEl1obDMZjTT5cQazsrYwgUVkVRjnMd7ILVdUKmrLF52MUfCRvZI9o/s1600/nav-bg.png)
 repeat-x 0 4px;height:69px}#cssmenu ul 
li{float:left;list-style:none}#cssmenu ul li 
a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 
0;border-radius:2px 2px 0 
0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px 
rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child 
a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active 
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJZxve7o5BPsjlg2tJKUqmZ20KhfpMWnFfWfRr9izvfuit6914zi9kNle13fFrykGgBHMKgbm34LbhLtx0Av_1pWHBLwl-BW653UKiGb-ppBHN-aRAaeObvkCTFwMmW2TW7v_DIJikctc/s1600/color.png)
 center 
bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#004f7c;text-shadow:0
 1px 1px rgba(255,255,255,0.55);opacity:1}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
020-Tabbed Chrome and Blue :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Tabbed Chrome and Blue" border="0" height="62" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwdmWo92Mw5DiKTgFSRvXIrD04PiVGPBxLJtP_f64bVYnIAf3GassGfQyWDcbtNjMFs3QKADY0CLSKuNjfPDWm_Ogzzdil_9iS5TEz1xYzta5Nu801WKmTf-PtmOab1-swPzjLke4CusyH/s1600/020-Tabbed+Chrome+and+Blue.png" width="276" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/020-Tabbed%20Chrome%20and%20Blue.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style 
type="text/css">#cssmenu{float:left;width:100%;background:#efefef;font-size:93%;line-height:normal;border-bottom:1px
 solid #666}#cssmenu ul{margin:0;padding:10px 10px 0 
50px;list-style:none}#cssmenu 
li{display:inline;margin:0;padding:0}#cssmenu 
a{float:left;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4ffqHrPUwCkoKukh56f4jKBfdyrhcnhxp6jfUJZpvM_7SniXVYHTT9w1AQ0-TwjlmKY6uJEOcC_HHkne2LfLMhKWIqkhDMVVt_YGEy8Ppk6CFCCQs-3GaZgwRNpS8nLa9GobCvzmYuQs/s1600/tableftf.gif')
 no-repeat left top;margin:0;padding:0 0 0 
4px;text-decoration:none}#cssmenu a 
span{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkaKxSg71yioTNR5dP_urd838K2gRedvVdVl81QlKH0lbuYj7j-zsCo6oquoqYhvF0_KBS88zzktqbRsELti1JATkFN3IAAQQQfwAVEa8Yfz5bIzJjZ2biuySSJpNDjBc3_eirlg5D9IU/s1600/tabrightf.gif')
 no-repeat right top;padding:5px 15px 4px 6px;color:#666}/* Commented 
Backslash Hack hides rule from IE5-Mac */#cssmenu a span{float:none}/* 
End IE5-Mac hack */#cssmenu .active a span,#cssmenu a:hover 
span{color:#FFF}#cssmenu .active a,#cssmenu 
a:hover{background-position:0 -42px}#cssmenu .active a span,#cssmenu 
a:hover span{background-position:100% -42px}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
021-Dark Orange Tabbed Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Dark Orange Tabbed Menu" border="0" height="89" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsp5foalTp5L53awIM-3hZQLVdTtX74A2lV8pXOX4HvMLOYWmLDS_trfd_2NDkZO13ObEjDezERQtEDidOuaIrxhW5-U2_mkbfJcUwJaY7V8ivXZyyWeFGfwlRAx8WnzwScu4ga2CNUvMa/s1600/021-Dark+Orange+Tabbed+Menu.png" width="378" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/021-Dark%20Orange%20Tabbed%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the
 lovely google font,please keep this line at the top of your stylesheet 
*//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li 
a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu
 > ul:before,#cssmenu > 
ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjr-ABCVevUsKpVAcRXht03Wbhk3VaUR7ZYMSZx0IrVi5_RLOZfTfMfTCnxVo82Cjg6ZptDHLD1V-N4fQxyYuqP29cgzbytHdxiEysmxHfpZdqKkkD8LEc1k6_OkUsQzvsu2vJ4zDofYi/s1600/bottom-bg.png)
 repeat-x center bottom;border-radius:2px;width:auto}#cssmenu 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WjTdY-O6xFr67DPnbX_Wr4q7lZ7MgWc3tdgr-ZbbtULy1dwm8HYnIMc1nw0NmuqsJ9miBdLmuCgFjWir2bpnVAPmc50fyZM4Llc-Zr0otJJq_rCxpbHjSucmOoXjd24CjE_GbFnE-u85/s1600/nav-bg.png)
 repeat-x 0 4px;height:69px}#cssmenu ul 
li{float:left;list-style:none}#cssmenu ul li 
a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 
0;border-radius:2px 2px 0 
0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px 
rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child 
a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active 
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYUmdQQqC3U4B6wljBisMYdkWF8ou2fOGFAbdHir8Ju17Yp0u4w2F-pQHhZQ9JSpD4RUStoPKVNMQP2eJ62KMG19XU9LmdI6WndUP-Gk6nS_F7AtcpxhOiFuy0itjzx-_FKyc6eSXxQOYO/s1600/color.png)
 center 
bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#9b4106;text-shadow:0
 1px 1px rgba(255,255,255,0.35);opacity:1}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
022-Grey Tabbed Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Grey Tabbed Menu" border="0" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYeZcnL71nlm-kNAdPCV_wmUFPsfV0FXAceubA_6h_hRDFUAHPZJ-hR5nxUvHPvl_AO0Svfe4e6dO1emk9XumHeibhPv0CFqH_JPogCEP4FqXwwRuSB4cSe3pVvoabpHwCw1rBLzOYCqB/s1600/022-Grey+Tabbed+Menu.png" width="318" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/022-Grey%20Tabbed%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the
 lovely google font,please keep this line at the top of your stylesheet 
*//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li 
a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu
 > ul:before,#cssmenu > 
ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQw1fhzbTn-Y6wlf0NJ4iWiw1jpNEYo01iKOqePtqvzlbZ3u8lIrlI7EOiP-Uwfg_dt6BS3I254IrP6jBYUx6wReFqL0Rx5l7Yby2ei8cq9Kwa3b0qvRPO0SZbGlgK5mNu8oHHt4Gj0ipA/s1600/bottom-bg.png)
 repeat-x center bottom;border-radius:2px;width:auto}#cssmenu 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqe83L-ZxgbD1nV4l5tg0eE9SIvbdTU1aVDz4l8mcHpqpjxNlE-R-w2WpBYDWxGB1V72wVKa6HI1HmwmCl2CAm647m1k1eQjkB_vkBblbwJQOrJ5BVQ8sYKKajn8AmYEFYgV8vzKVvmMJP/s1600/nav-bg.png)
 repeat-x 0 4px;height:69px}#cssmenu ul 
li{float:left;list-style:none}#cssmenu ul li 
a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 
0;border-radius:2px 2px 0 
0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px 
rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child 
a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active 
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQu_Wum_xpwSDKm4XTcwbPZPmIiH1wSViBM2oFrDdpDdUg_yZS60upfYs8ZjTTfIjx2dZ8xXTZj089_W8eKz3JUl-rF4ym2iwd7WlhzjvIDUtz3dGpL2V0UBXWuAFgxpjgOCI1lQpGr_D/s1600/color.png)
 center 
bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#616161;text-shadow:0
 1px 1px rgba(255,255,255,0.35);opacity:1}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
023-Light Orange Tabbed Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Light Orange Tabbed Menu" border="0" height="84" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyIZXUCAo32_31rLCKY0rIxYnqRftZ2DFs76lw8ez6e434xSywpi_zlyPH-iPOjfdgs9ijhcIZobK4juhJS5IIu1RCw8BSrEquRiSw1X0wEg0NdSj__kgr0IqFCQ6vI1bS4WVON3gFePwQ/s1600/023-Light+Orange+Tabbed+Menu.png" width="375" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/023-Light%20Orange%20Tabbed%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the
 lovely google font,please keep this line at the top of your stylesheet 
*//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li 
a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu
 > ul:before,#cssmenu > 
ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu{width:auto;zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5iHOpmGeyD7UZy-Z8TcYzcFR8fvvdMRh6cUIQ8vJUkGBzQpz1kF49AC90xG-0uCW5F46kOesF-9d456zoGZIpV_yRgp5GBW5vlNLIdIGGPVRc5Q83N027lp1KBK2ZJSXZ8CSom4XzSDS5/s1600/bottom-bg.png)
 repeat-x center bottom;border-radius:2px}#cssmenu 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieMQJQ-vrXce_A5Fm0g0cq7T9wiu0XW-e1m4V3mPSZCvdNV3MOfUIBlsMC4Ug-i-nl9qoxozGGOIL_-Z3TSKnK-S0xrLwHRUOgCBArPEl6GYxMZ8GSuvXJ41hYyIhxNkaPb2gNF4-YjwFt/s1600/nav-bg.png)
 repeat-x 0 4px;height:69px}#cssmenu ul 
li{float:left;list-style:none}#cssmenu ul li 
a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 
0;border-radius:2px 2px 0 
0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px 
rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child 
a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active 
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSIqY3r-LPQnSGhI0S23_ltvixo0Q8-g_TYcRBAL1QSC8oMZ_QX43VRCaKiBViBPhdZTbJVU6bCHxFDyb3zCDh3QTFf5PHrh0T2J-rJHSwYJjqb1AowOdC9yea2_iWxyTcJ03yfXVcuTlS/s1600/color.png)
 center 
bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#946f00;text-shadow:0
 1px 1px rgba(255,255,255,0.55);opacity:1}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
024-Purple Tabbed Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Purple Tabbed Menu" border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xR0ke-TXE5KVlNqvvHONCZ10ywP3ktzosCcs4rsezCYlk5y0_SFSHyML7YKd4zIBfijR6q2AZxsYRd9afiXs136UrEpUuYHU-AbW_okUgSxTLR2TETrs6LCnhs24ApIfGjQ8XjFV38WB/s1600/024-Purple+Tabbed+Menu.png" width="345" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/024-Purple%20Tabbed%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the
 lovely google font,please keep this line at the top of your stylesheet 
*//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li 
a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu
 > ul:before,#cssmenu > 
ul:after{content:'';display:table}#cssmenu:after,#cssmenu > 
ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYx3Bu67L67Mxe7698ufm0NKzhZ-lX0emC8tkKeR23-kz9ybMLGeSCdtcyAuVaa0CC6M8kjmphgGafJnX3HCZbDvco70NVT6WCh-ilPwEs_ZsvSugTad024F4CPkAaJ-fQ8lm5obYI63U3/s1600/bottom-bg.png)
 repeat-x center bottom;border-radius:2px;width:auto}#cssmenu 
ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhulzm6aR_Dn0NTUmBlQOlG5QTm_TDB7lEKLSqc_g0s5pQS0TeGvjNSFe5odDBkUaD11x7fAoeMlNEcWRE-fLiYOw1NsVIJ7LwD_blZO4XLfW3Gffp9mlyKrGWkusS3NFTtzmkItkMJK9wF/s1600/nav-bg.png)
 repeat-x 0 4px;height:69px}#cssmenu ul 
li{float:left;list-style:none}#cssmenu ul li 
a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 
0;border-radius:2px 2px 0 
0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px 
rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child 
a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active 
a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIekqy4Fk0Y5ZzX4Ls1KDMqcZd8X-IzY3CzYQhiXFvjrzCOTN1nl1Id9OjmFwoITSBcG_T0pOJlLIkEVhFAylZ_qVjBsnNERtHw71IlOACS4fNkzVaMOvZvvQzSLnHWTuSQnHdJGcyHqAy/s1600/color.png)
 center 
bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#561756;text-shadow:0
 1px 1px rgba(255,255,255,0.35);opacity:1}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
025-Blue and Grey Sprite :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Blue and Grey Sprite" border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV1-MRrel0yApQEiOdHgWWSdLiDI4uwclqYo3cT0PUVWjGVtSxB6oWygqY7HkdhNtyW3JgHCQCvRkOrFXQ6EO4z8cQzUg-sIMzd6tmqVD7lCinx_0hBq8R2I3C3zCKEYIAl6SWni8Gm4PM/s320/025-Blue+and+Grey+Sprite.png" width="363" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/025-Blue%20and%20Grey%20Sprite.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu 
ul{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:30px;font-size:16px;font-weight:bold;background:transparent
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8H3RkwFDEhxITvZqenL8ygdISuKFTwMxnbsLFra1FhedsSUEQPUBxVCYUqHRoEb7M6eslChOo75x-azqRTIrGvUXLip1UzxpKtR7E2aKCQrVTkOLxHfloAr4dwSzmJkSYVjBPRHxmU8UU/s1600/nav_bg.png)
 repeat-x top 
left;font-family:Arial,Helvetica,sans-serif;border-bottom:1px solid 
#000;border-top:1px solid #000}#cssmenu 
li{display:block;float:left;margin:0;padding:0}#cssmenu li 
a{display:block;float:left;color:#999;text-decoration:none;font-weight:bold;padding:8px
 20px 0 20px}#cssmenu li 
a:hover{color:#FFF;height:22px;background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8H3RkwFDEhxITvZqenL8ygdISuKFTwMxnbsLFra1FhedsSUEQPUBxVCYUqHRoEb7M6eslChOo75x-azqRTIrGvUXLip1UzxpKtR7E2aKCQrVTkOLxHfloAr4dwSzmJkSYVjBPRHxmU8UU/s1600/nav_bg.png)
 0 -30px no-repeat}#cssmenu li.active 
a{display:inline;height:22px;background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8H3RkwFDEhxITvZqenL8ygdISuKFTwMxnbsLFra1FhedsSUEQPUBxVCYUqHRoEb7M6eslChOo75x-azqRTIrGvUXLip1UzxpKtR7E2aKCQrVTkOLxHfloAr4dwSzmJkSYVjBPRHxmU8UU/s1600/nav_bg.png)
 0 -30px no-repeat;float:left;margin:0}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
026-Aqua Bubble Wrap :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Aqua Bubble Wrap" border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXh-lstk2E5Wf7YYPA71MBJGzl8WZsu-h1xnyWqdQK7swIFkcVNnYlYTjZEisKYqGsQxXgT6LYZgmT3D6Vk5fhLKVPhFrY44iY64ccK2NiSU1YEVdKFw7dTCNg_j6ls5ETFqt-aDX5-9qL/s1600/026-Aqua+Bubble+Wrap.png" width="446" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/026-Aqua%20Bubble%20Wrap.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style 
type="text/css">#cssmenu{width:auto;height:27px;margin:0;padding:0;background:#000
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgk_o12LcQNFe0Tau-p7S8-sO_yuCFArhC8k3xIWoPyxJxZ-lhE1temC40Qsjzo1-TiWYlpJJIifHDXZpJ7aVcWN-gNCLJF36Yrp7oekFZZ15xqkTgGltjKFzBYpB8SWMkt_sBColuLxAQ/s1600/bg-bubplastic.gif)
 top left repeat-x}#cssmenu 
ul{list-style:none;margin:0;padding:0}#cssmenu ul 
li{float:left;margin:0;padding:0;background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiHYOy1ap9DvMVnX3wnZ4NivIUgegKhepuL42WJ0lmeEynr7UuLiXqO8DCjprNvwu1W0mmTvPK6DUoR4dLEbENZnLCPj52rKEN9UuW1rVOZoIMgMzaX6fvr7Qz-F-0bUBxwHt0DRGVjxM/s1600/bg-bubplastic-button.gif)
 top left no-repeat}#cssmenu ul li 
a{display:block;height:27px;padding-left:35px;float:left;text-transform:uppercase;font-family:'Helvetica
 Neue',helvetica,'microsoft sans 
serif',arial,sans-serif;font-size:16px;color:#FFF;text-decoration:none}#cssmenu
 ul li a 
span{display:block;float:left;height:22px;padding-top:5px;padding-right:35px;background:transparent
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiHYOy1ap9DvMVnX3wnZ4NivIUgegKhepuL42WJ0lmeEynr7UuLiXqO8DCjprNvwu1W0mmTvPK6DUoR4dLEbENZnLCPj52rKEN9UuW1rVOZoIMgMzaX6fvr7Qz-F-0bUBxwHt0DRGVjxM/s1600/bg-bubplastic-button.gif)
 top right no-repeat;cursor:pointer}/* AQUA HOVER */#cssmenu ul li 
a:hover,#cssmenu ul li.active a{background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl81LDy0fsTKF2NuQWxP6-cn_mv5ZfcUaVbgq71Y7EauRDDn8zLXjDjrhGC5fH1-G7fyQ2UGZwxk85L9lxmR6n3-17hw5JG2aYyHmYgekZzMwFv-qaBADUQUItOcwABsMykioxHTj_x4is/s1600/bg-bubplastic-h-aqua.gif)
 top left no-repeat;color:#FFF}#cssmenu ul li a:hover span,#cssmenu ul 
li.active a span{background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl81LDy0fsTKF2NuQWxP6-cn_mv5ZfcUaVbgq71Y7EauRDDn8zLXjDjrhGC5fH1-G7fyQ2UGZwxk85L9lxmR6n3-17hw5JG2aYyHmYgekZzMwFv-qaBADUQUItOcwABsMykioxHTj_x4is/s1600/bg-bubplastic-h-aqua.gif)
 top right no-repeat}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
027-Skinny Green :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Skinny Green" border="0" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpr0alpIymIwzoHzv9BTaXp4_mfDty-4WQBOponJ7RmkzELF_daTvqq1IKPbLA53CYxhgmWIK7nxZgT9jtmxp5tHS0-TJexgRtEawbb9JHgmqZv4Nq9SDu8MgSHX2-Fi60vZgRoP4Z64ch/s1600/027-Skinny+Green.png" width="326" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/027-Skinny%20Green.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu 
ul{list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3GvFjN-rpJDGJw_-tD3MYCisircE_BwEu3BIOOq-DOEGHpHk8GuV82tDgVanmlQVnQsNz3ejJ5b6xTYdRxdEYZli5eKhG4KLSveqAGKkbfNOmPVt8uhWUkSlA_IXxwJyJ0MexOvgP87h_/s1600/bg.png)
 repeat-x top 
left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid 
#000;margin:0;padding:0}#cssmenu 
li{display:block;float:left;margin:0;padding:0}#cssmenu li 
a{float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 
15px 0;font-weight:normal}#cssmenu li a:hover,#cssmenu 
.active{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3GvFjN-rpJDGJw_-tD3MYCisircE_BwEu3BIOOq-DOEGHpHk8GuV82tDgVanmlQVnQsNz3ejJ5b6xTYdRxdEYZli5eKhG4KLSveqAGKkbfNOmPVt8uhWUkSlA_IXxwJyJ0MexOvgP87h_/s1600/bg.png)
 repeat-x top left;text-decoration:none}#cssmenu .active 
a{color:#fff;font-weight:700}#cssmenu 
ul{background-color:#629600}#cssmenu li a:hover,#cssmenu 
li.active{background-color:#7AB900}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
028-Indented Horizontal Menu :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Indented Horizontal Menu" border="0" height="61" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5GeqrpVn_CS1acs4Go8s0SYRrjVBWJ0yfbncNupYmFv1P7w4CoYRPMT34tMmAfSUc_R7KLWmqXv6BspsvpBE_QGME8KzsnQP8gduQphgl0MrQHOBao_TfSEvf59A0wwjVCIkRFyj5XbaD/s1600/028-Indented+Horizontal+Menu.png" width="332" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/028-Indented%20Horizontal%20Menu.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">@import 
url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@charset 
'UTF-8';/* Base Styles */#cssmenu ul,#cssmenu li,#cssmenu 
a{list-style:none;margin:0;padding:0;border:0;line-height:1;font-family:'Lato',sans-serif}#cssmenu{border:1px
 solid 
#133e40;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;width:auto}#cssmenu
 
ul{zoom:1;background:#36b0b6;background:-moz-linear-gradient(top,#36b0b6
 0%,#2a8a8f 100%);background:-webkit-gradient(linear,left top,left 
bottom,color-stop(0%,#36b0b6),color-stop(100%,#2a8a8f));background:-webkit-linear-gradient(top,#36b0b6
 0%,#2a8a8f 100%);background:-o-linear-gradient(top,#36b0b6 0%,#2a8a8f 
100%);background:-ms-linear-gradient(top,#36b0b6 0%,#2a8a8f 
100%);background:linear-gradient(top,#36b0b6 0%,#2a8a8f 
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color',endColorstr='@bottom-color',GradientType=0);padding:5px
 
10px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px}#cssmenu
 ul:before{content:'';display:block}#cssmenu 
ul:after{content:'';display:table;clear:both}#cssmenu 
li{float:left;margin:0 5px 0 0;border:1px solid transparent}#cssmenu li 
a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;padding:8px
 15px 9px;display:block;text-decoration:none;color:#fff;border:1px solid
 transparent;font-size:16px}#cssmenu 
li.active{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px
 solid #36b0b6}#cssmenu li.active 
a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:block;background:#1e6468;border:1px
 solid #133e40;-moz-box-shadow:inset 0 5px 10px 
#133e40;-webkit-box-shadow:inset 0 5px 10px #133e40;box-shadow:inset 0 
5px 10px #133e40}#cssmenu 
li:hover{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;border:1px
 solid #36b0b6}#cssmenu li:hover 
a{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;display:block;background:#1e6468;border:1px
 solid #133e40;-moz-box-shadow:inset 0 5px 10px 
#133e40;-webkit-box-shadow:inset 0 5px 10px #133e40;box-shadow:inset 0 
5px 10px #133e40}</style><a href="http://24work.blogspot.com/" 
rel="dofollow" target="_blank" title="Drop Down Menus"><img 
src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" 
style="position: fixed; bottom: 10%; right: 0%; top: 0px;" 
/></a><a href="http://24work.blogspot.com/" rel="dofollow" 
target="_blank" title="CSS Drop Down Menu"><img 
src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" 
style="position: fixed; bottom: 10%; right: 0%;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Pure CSS Dropdown Menu"><img 
src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" 
border="0" style="position: fixed; bottom: 10%; left: 0%;" 
/></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
029-Skinny Orange :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Skinny Orange" border="0" height="46" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQP5Np7Nscip1WyEv3UbgjKEa41GusKS99UDMCoGWp5mlHoeUZgDvdiWjXzfmUmA8BxwNqlQgnDc1rdTyhinVgqs5n5GFwDUQz8Mic7sCUE-FRdc_pGJQ2qKXy6gEMhV9VcEq2-AtKl9tR/s1600/029-Skinny+Orange.png" width="360" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/029-Skinny%20Orange.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu 
ul{list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuXfxByE6uwOZP73FwdfLT-p2dFBrTBY8CHpoBvvpF0EywEF89iaX7lbt5LKeNWfOw0Szw5widRk0TLgemNELS3xH5EVnNZQPExrmwSqVIWvL7NpGrS_ENISagjmusvn-bNjuI9GebAqwB/s1600/bg.png)
 repeat-x top 
left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid 
#000;margin:0;padding:0}#cssmenu 
li{display:block;float:left;margin:0;padding:0}#cssmenu li 
a{float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 
15px 0;font-weight:normal}#cssmenu li a:hover,#cssmenu 
.active{color:#fff;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuXfxByE6uwOZP73FwdfLT-p2dFBrTBY8CHpoBvvpF0EywEF89iaX7lbt5LKeNWfOw0Szw5widRk0TLgemNELS3xH5EVnNZQPExrmwSqVIWvL7NpGrS_ENISagjmusvn-bNjuI9GebAqwB/s1600/bg.png)
 repeat-x top left;text-decoration:none}#cssmenu .active 
a{color:#fff;font-weight:700}#cssmenu 
ul{background-color:#DC4900}#cssmenu li a:hover,#cssmenu 
li.active{background-color:#F46D00}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
030-Sky Blue :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Sky Blue" border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwlJ6uzLGtMsYLsC4LiMB1nvoBqVYIYypaG_3IK3IjO8x_TmXAlF670P6XT7XS1rSazxom_bzlpoyG5kfju29ulv-N2qmG9-E8abCVVxo3-q4Fe66nX3WIB2MeJf1dDNv98AzjiNsJaXvq/s1600/030-Sky+Blue.png" width="301" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/030-Sky%20Blue.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu 
ul{margin:0;padding:0;list-style-type:none;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnu27zoX57UUxJrJO5vdLXaBz4oZKz2zeg8yyp90zkQ5QXBDZMfNiddFWeFomLsj2z-UD6PHRyNO6UpE5x8AIRN0RnwoAbRJeLHkiaO0O1XYmWLwBuXntHb6mWfjIeIDSeUe9pdkBbbAYy/s1600/off.gif')
 repeat-x top 
left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px 
solid #004c99;border-top:1px solid #74b0c6;width:auto}#cssmenu 
li{display:block;float:left;margin:0;padding:0}#cssmenu li 
a{display:block;float:left;color:#6d7078;text-decoration:none;font-weight:bold;padding:12px
 20px 0 20px;height:24px;background:transparent 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL6NWZyTnwmt3xtamETOSHys4xSTNSxrNNhfy2_a0_mZ79m0Kz0Y2jFwRW2iYO7Pwskw8t_2QHhI9F7LarRinuscxCejUFp1PHwmI0y9eN7qmI0UW3suld49HmKOCJ6hgLSgiEGND0vRIQ/s1600/divider.gif')
 no-repeat top right}#cssmenu li a:hover{background:transparent 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyqxp7hue8jX-PUVkg210riNyQnfMwkf3T0z86tEUZ6avjDFCMQxRLJYzEq6aL2ei65HviUnbQko19r1vyYEAFT2bOW61ms_UwcJgxL5v3ooMxyRnnuIY9ZCdjXGir62qNK7VNBUHyQzKh/s1600/hover.gif')
 no-repeat top right;color:#6d7078}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
031-Purple Bubble Wrap :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Purple Bubble Wrap" border="0" height="46" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjryYmR4AYlc7I1YZ3TxpoYasihwHIazaBi4dkfhc8PNVKoP98V2NbmA7UplpJML9-5o-fcyhuyfRlpJeuaH-XGhIuffcHDFx0vA6A6YGvaJ6LCzE8w2zeohB4MzospmLmjzaEvLpLtX1il/s1600/031-Purple+Bubble+Wrap.png" width="380" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/031-Purple%20Bubble%20Wrap.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style 
type="text/css">#cssmenu{width:auto;height:27px;margin:0;padding:0;background:#000
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjKrM6oOJQ88rdWPwSSHaEs4n752tAhBLAmV5joKeCLHjQZRYDn2qkA1wZQLxgn4JeYls9PHjNRJIbuUnx8Xb-CFLQsNpIAHtyR7FXa6-MfCIMPmgUnmFMEUS-mHdKNa4o163fjQ19hF9L/s1600/bg-bubplastic.gif)
 top left repeat-x}#cssmenu 
ul{list-style:none;margin:0;padding:0}#cssmenu ul 
li{float:left;margin:0;padding:0;background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY5S6fDS4XOD1UzD-pNL_qZCfO5eSlNPW557UnlFNj8G_-lJLfxE8bOCQDHh2UTFeXkgZIWWCGrQcSJX_c_MwYW08M9fZHG1cBZmNfZy4rDpaENVf2kyNFi7upPuy6pzSRbXJPQwIZ6L9H/s1600/bg-bubplastic-button.gif)
 top left no-repeat}#cssmenu ul li 
a{display:block;height:27px;padding-left:35px;float:left;text-transform:uppercase;font-family:'Helvetica
 Neue',helvetica,'microsoft sans 
serif',arial,sans-serif;font-size:16px;color:#FFF;text-decoration:none}#cssmenu
 ul li a 
span{display:block;float:left;height:22px;padding-top:5px;padding-right:35px;background:transparent
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY5S6fDS4XOD1UzD-pNL_qZCfO5eSlNPW557UnlFNj8G_-lJLfxE8bOCQDHh2UTFeXkgZIWWCGrQcSJX_c_MwYW08M9fZHG1cBZmNfZy4rDpaENVf2kyNFi7upPuy6pzSRbXJPQwIZ6L9H/s1600/bg-bubplastic-button.gif)
 top right no-repeat;cursor:pointer}#cssmenu ul li a:hover,#cssmenu ul 
li.active a{background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6GxgsLB6zl4oXKGIi8NrSSKafQJ0g2Y2f7CMnCq9Bz6hCoKW1hTOzAx_SgytcwV-g6rUvNCfRI4g7O6eAOakIMHNDa1VuxLFm7W6skX2XnEzouHfRZssLfosblqo7m2YJlx4ebCjZ_jg5/s1600/bg-bubplastic-h-purple.gif)
 top left no-repeat}#cssmenu ul li a:hover span,#cssmenu ul li.active a 
span{background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6GxgsLB6zl4oXKGIi8NrSSKafQJ0g2Y2f7CMnCq9Bz6hCoKW1hTOzAx_SgytcwV-g6rUvNCfRI4g7O6eAOakIMHNDa1VuxLFm7W6skX2XnEzouHfRZssLfosblqo7m2YJlx4ebCjZ_jg5/s1600/bg-bubplastic-h-purple.gif)
 top right no-repeat}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
032-Simple Grey Hover :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Simple Grey Hover" border="0" height="58" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2pketjl-tSqAWY6nthkSlnAVRMbey-iHh5VydJiNnm67UZJK0DDdZShgCcvaH4NKP5hD9s8UZA_gkEKSLfFLBZ9w4mgqxA7HIhOZKOmrb396pWCkEOFkqc3zEIcYsEMeXzEytqLHal23p/s1600/032-Simple+Grey+Hover.png" width="389" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/032-Simple%20Grey%20Hover.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">#cssmenu 
ul{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIG_nin98I7Jxn0K4ovIK6ldzH9a6la9kJAu8HcBmVvqKTwAihMa1gVLrO9LBm59p3s1gS7K-pE4LUGZUZ4aFRCKKn9g5w_2rbpfJXExzsefUd3uNcZ1WEn4mbtS9khYryjbgKmB6T9B3_/s1600/off.gif')
 repeat-x top 
left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px 
solid #555;border-top:1px solid #919191}#cssmenu 
li{display:block;float:left;margin:0;padding:0}#cssmenu li 
a{display:block;float:left;color:#8c3a3a;text-decoration:none;font-weight:bold;padding:12px
 20px 0 20px;height:24px;background:transparent 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9ROGhdHLdzcKmBABYlXLpANAhzJuESmmcepjm3B4FQ2dMT3P_ZHqAgj4B5yPZvbY9KVEPZl-YA5GUEU5ln4hb87xu-xMlQfWgpnRa4KTEL7C-DwHR-4iFY04SNdLhF8kyXlDdgCnhuYa/s1600/divider.gif')
 no-repeat top right}#cssmenu li a:hover{background:transparent 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT-mOm9nppcRBlch7lUTTdxyfPwH6M-H0bMZv1vHsSds7IVTTT34Dbh0ai1yhLysIej9al2NgRJ_EIDxJljMK45JBmv8gq013QsYiyRoP-hm2V1enJLWWz6Gj0QyX8sGuPiXSWCcnP5-dJ/s1600/hover.gif')
 no-repeat top right;color:#8c3a3a}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
033-Blue Bubble Wrap :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Blue Bubble Wrap" border="0" height="46" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1j-lHX7q-bkdEsdAdvwmkVLab9Gu1mqMh3SSOIpWt1XvKOcULELYEfMc5LwRr7kas0vA9Zi8TDVug8RLne6F80ZeQZH1alowPghibp9nvnHxJx34yzCuiRwvNB7zXA7Wk590OqgW5DB4/s1600/033-Blue+Bubble+Wrap.png" width="364" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/033-Blue%20Bubble%20Wrap.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style 
type="text/css">#cssmenu{width:auto;height:27px;margin:0;padding:0;background:#000
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG8nUWLOwnEAY458UPEksOK6VAW7YEqU4dZTB51e8Jz3lqwQIAwiio9FbMhHO9jzQhc9Yz0vAmHSUpqLWyJ6JuJEVnHbFxbZV02lgQOyCp8wTS0gxzCy6EeBtY4momXrPjifKmLeukOj1I/s1600/bg-bubplastic.gif)
 top left repeat-x}#cssmenu 
ul{list-style:none;margin:0;padding:0}#cssmenu ul 
li{float:left;margin:0;padding:0;background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4UiqfeuogBdEqPq03H4omy19bWYS6ve3nDLMw2q2WMOqaOoyUybqSHxI94wpg1oF4zcYkO_iYJ8bDsr3utJZtHTkjJrtPia5lljGJbjJP1-N2YA1z6imUkbU07VWpAApqKSSk3dyfZZ4P/s1600/bg-bubplastic-button.gif)
 top left no-repeat}#cssmenu ul li 
a{display:block;height:27px;padding-left:35px;float:left;text-transform:uppercase;font-family:'Helvetica
 Neue',helvetica,'microsoft sans 
serif',arial,sans-serif;font-size:16px;color:#FFF;text-decoration:none}#cssmenu
 ul li a 
span{display:block;float:left;height:22px;padding-top:5px;padding-right:35px;background:transparent
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4UiqfeuogBdEqPq03H4omy19bWYS6ve3nDLMw2q2WMOqaOoyUybqSHxI94wpg1oF4zcYkO_iYJ8bDsr3utJZtHTkjJrtPia5lljGJbjJP1-N2YA1z6imUkbU07VWpAApqKSSk3dyfZZ4P/s1600/bg-bubplastic-button.gif)
 top right no-repeat;cursor:pointer}#cssmenu ul li a:hover,#cssmenu ul 
li.active a{background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0uwdGxdkGdxwbd6Zg_59odLlyXhyFfwV-xorqbGxaHoajKih-T9AXDC5sVxGpW27Bkje95eAr0cneduSlS1-DWXzeXXKGdr9XVr_Riw_ERBcr2Zw4xkAEY2vD0LCq509GgcrBrktIFtr/s1600/bg-bubplastic-h-blue.gif)
 top left no-repeat}#cssmenu ul li a:hover span,#cssmenu ul li.active a 
span{background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0uwdGxdkGdxwbd6Zg_59odLlyXhyFfwV-xorqbGxaHoajKih-T9AXDC5sVxGpW27Bkje95eAr0cneduSlS1-DWXzeXXKGdr9XVr_Riw_ERBcr2Zw4xkAEY2vD0LCq509GgcrBrktIFtr/s1600/bg-bubplastic-h-blue.gif)
 top right no-repeat}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
034-Green Algea :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Green Algea" border="0" height="63" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPzY63Vb1apS13VQI1X9Vekl5Y72N_wJawds0xOKaQ0pl8J2CrtozP5jk4ZM2oGUsp67l2wgm0-cUN1x50uKRzlIyvI0iHW5wH1kw5Ck0hjarc50nHj2W5FD0DfRYOabC6LZ8NC9G1sYXH/s1600/034-Green+Algea.png" width="306" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/034-Green%20Algea.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style type="text/css">/****** H3 */#cssmenu 
ul{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent
 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhToBpP20uSiAY7lz5UPEqaD8jZt_z-Yhg3Yimj8qhFaRL0WFlZAwa-IC9PH9mXzJp6Vjr1liZpa1FYxeqMKhWPeWidDIW5V4Dj_IXRxN1Xcm1cu4bCFweAChGNn1S2wDT-8Rx7KIML8YFe/s1600/off.gif')
 repeat-x top 
left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px 
solid #366;border-top:1px solid #C0E2D4}#cssmenu 
li{display:block;float:left;margin:0;pading:0}#cssmenu li 
a{display:block;float:left;color:#874B46;text-decoration:none;font-weight:bold;padding:12px
 20px 0 20px;height:24px;background:transparent 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg491i0or6TWPv0zwo06cMlheIkOb_ZdqmxADyORSGg2yXy74iJZf8AhryYbl2Ak2bNmg13c2xeHVwKRa5CZ0zlNkUQ1mhiCqhUARPRPZbLGRDs7P8hyufJafMX-yvYX_0fWrptidnoWd19/s1600/divider.gif')
 no-repeat top right}#cssmenu li a:hover{background:transparent 
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvze9Kd11dbLLfUeY04dYWWPWpMXGmjtii5rDaLod71Q5acx4sk6qkaSgtUkNO560D3w29hLrNeF5XkAClV-wBxRxi-ayuTonosfSbr4Q-CKJVXSewKeyis9Ca1LWRecasqgQLAfCb39-i/s1600/hover.gif')
 no-repeat top right;color:#874B46}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
<br />
<br />
<br />
035-Red Bubble Wrap :-<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img alt="Red Bubble Wrap" border="0" height="41" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUzHFz2Sm4szDA5ccJibI2qu6KRLvxgfoiaBlDAE1ENzOq7TaFcfgyWEP74WsOeQxuEndpm_dM7qzEVlio_xJO_n3GCYTKUDuM56dOYRgw6u89YHEcRjL82jx_ZVI7vvr4-4HFzEZ3kdx/s1600/035-Red+Bubble+Wrap.png" width="400" /></div>
<br />
<br />
<div style="text-align: center;">
<a class="button big green external_link" href="http://24work.blogspot.com/p/demo.html?url=http://24work-new.googlecode.com/svn/trunk/24work-blogspot/35-drop-down/035-Red%20Bubble%20Wrap.html" rel="nofollow" target="_blank">Live Demo</a></div>
<br />
<br />
<br />
<div class="code">
<style 
type="text/css">#cssmenu{width:auto;height:27px;margin:0;padding:0;background:#000
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_dpdIa4gOk_BpFZwWCBay1XW7MYBQPtsCSrQwAwhC1XBvS6KfuCspwQqgSoTvEbhjGPpW8Fm8-yzFTuocR29G7CP4ROBJzGoeDLvitQrTXSRa-qVnYi-2h5_imFll22DXu_5-MQtFhI7/s1600/bg-bubplastic.gif)
 top left repeat-x}#cssmenu 
ul{list-style:none;margin:0;padding:0}#cssmenu ul 
li{float:left;margin:0;padding:0;background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimEp4WxI10HONf6UgdlVJpOYzwQt8AdbPQ7gBSQqUVQQNjubovv2JeHITO5NeJT4Ap_2rVyHc5EcyAjgXgcqGhNg_Zay2RNINeOUvcahPpB8Q-42oN_7p8_RX9HzN1sPKwPvL-EYKErw7S/s1600/bg-bubplastic-button.gif)
 top left no-repeat}#cssmenu ul li 
a{display:block;height:27px;padding-left:35px;float:left;text-transform:uppercase;font-family:'Helvetica
 Neue',helvetica,'microsoft sans 
serif',arial,sans-serif;font-size:16px;color:#FFF;text-decoration:none}#cssmenu
 ul li a 
span{display:block;float:left;height:22px;padding-top:5px;padding-right:35px;background:transparent
 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimEp4WxI10HONf6UgdlVJpOYzwQt8AdbPQ7gBSQqUVQQNjubovv2JeHITO5NeJT4Ap_2rVyHc5EcyAjgXgcqGhNg_Zay2RNINeOUvcahPpB8Q-42oN_7p8_RX9HzN1sPKwPvL-EYKErw7S/s1600/bg-bubplastic-button.gif)
 top right no-repeat;cursor:pointer}#cssmenu ul li a:hover,#cssmenu ul 
li.active a{background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvlEUzqQgog85BGVwtrGrRAGnuGl8JoF0dt-OHIAmfEMVwG8vOhmOqgKQ8FTBWjOWGTCLQqpBbmcqfrJQX92Iepz5ybivRYMwuQVQRVHTmp4HQVUGSV9_mjbvfLJq334GxqqNxb3CWArB/s320/bg-bubplastic-h-red.gif)
 top left no-repeat}#cssmenu ul li a:hover span,#cssmenu ul li.active a 
span{background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixvlEUzqQgog85BGVwtrGrRAGnuGl8JoF0dt-OHIAmfEMVwG8vOhmOqgKQ8FTBWjOWGTCLQqpBbmcqfrJQX92Iepz5ybivRYMwuQVQRVHTmp4HQVUGSV9_mjbvfLJq334GxqqNxb3CWArB/s320/bg-bubplastic-h-red.gif)
 top right no-repeat}</style><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="Drop Down Menus"><img src="https://bitly.com/24workpng1" 
alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; 
right: 0%; top: 0px;" /></a><a 
href="http://24work.blogspot.com/" rel="dofollow" target="_blank" 
title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1"
 alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 
10%; right: 0%;" /></a><a href="http://24work.blogspot.com/"
 rel="dofollow" target="_blank" title="Pure CSS Dropdown 
Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS 
Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 
0%;" /></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="cssmenu"><br />
<ul><br />
<li class="active"><a href="index.html"><span>Home</span></a></li><br />
<li><a href="#"><span>Products</span></a></li><br />
<li><a href="#"><span>About</span></a></li><br />
<li class="last"><a href="#"><span>Contact</span></a></li><br />
</ul><br />
</div></div>
</div>

35+ Drop Down Menu Widget in Blogger Horizontal Menus CSS & CSS3

Drop down Navigation menu is an essential part of any blog or website. This is the awesome CSS dropdown navigation menu which is built ...

Recent Posts Widget for Blogger Text CSS Hover Effect with jQuery

35+ Drop Down Menu Widget in Blogger Horizontal Menus CSS & CSS3