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.
<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="" rel="dofollow" target="_blank" title="Drop Down Menus"><img alt="Drop Down Menus" border="0" src="" style="bottom: 10%; position: fixed; right: 0%; top: 0px;" /></a><a href="" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img alt="CSS Drop Down Menu" border="0" src="" style="bottom: 10%; position: fixed; right: 0%;" /></a><a href="" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img alt="Pure CSS Dropdown Menu" border="0" src="" style="bottom: 10%; left: 0%; position: fixed;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->
<!-- customize your menus Links -->
<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">Alt Tuts</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>
<br /></div>
0 comments:
Post a Comment