Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Monday 28 September 2015

Colored Tab Dropdown

Colored Tab Dropdown

Drop down menu of the best tool of blogger to impression of your viewers to again visit your blog on blogger.
Blogger is site to create a free blog with do not purchase. Blogger is a cool and big blogging plate-farm to many people to a large number of blog create daily on it.
In this tutorial i will tech to you create a free and cool drop-down menu bar with different color.
Drop-down menu is used to impress your viewer to again visit your blogger blog.
Colored Tab Dropdown

<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://alttuts.blogspot.com/" target="_blank"><img alt="Drop Down Menus" border="0" src="ALtTuts.blogspot.com" style="bottom: 10%; position: fixed; right: 0%; top: 0px;" /><img alt="CSS Drop Down Menu" border="0" src="ALtTuts.blogspot.com" style="bottom: 10%; position: fixed; right: 0%;" /><img alt="Pure CSS Dropdown Menu" border="0" src="ALtTuts.blogspot.com" style="bottom: 10%; left: 0%; position: fixed;" /><!-- Dont edit this CSS Drop Down Menu code or it will not work -->



<!-- customize your menus Links -->

</a><br />
<div id="cssmenu">
<ul>
<li class="active"><a href="http://alttuts.blogspot.com/" target="_blank">Home</a></li>
<li class="has-sub"><a href="http://alttuts.blogspot.com/" target="_blank">Products
</a><ul>
<li class="has-sub"><a href="http://alttuts.blogspot.com/" target="_blank">Product 1
</a><ul>
<li><a href="http://alttuts.blogspot.com/" target="_blank">Sub Item</a></li>
<li class="last"><a href="http://alttuts.blogspot.com/" target="_blank">Sub Item</a></li>
</ul>
</li>
<li class="has-sub"><a href="http://alttuts.blogspot.com/" target="_blank">Product 2
</a><ul>
<li><a href="http://alttuts.blogspot.com/" target="_blank">Sub Item</a></li>
<li class="last"><a href="http://alttuts.blogspot.com/" target="_blank">Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://alttuts.blogspot.com/" target="_blank">About</a></li>
<li class="last"><a href="http://alttuts.blogspot.com/" target="_blank">Contact</a></li>
</ul>
</div>

Colored Tab Dropdown

No comments:

Post a Comment