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:7px 6px 0;background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjprLYh4iTE7Jfa7yixk2zKOT7emKGVBf8ZMH9MEJkCCj6hxV5YfMFCZyB07c_eRgtmxe7ee7Pjz65dmNvnuJeqWL6h7L3ILjhfJ-XNMqSydTfoFmAjxEjhNcp88Ud5bxyV8Ikuj7r19gYx/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/AVvXsEjprLYh4iTE7Jfa7yixk2zKOT7emKGVBf8ZMH9MEJkCCj6hxV5YfMFCZyB07c_eRgtmxe7ee7Pjz65dmNvnuJeqWL6h7L3ILjhfJ-XNMqSydTfoFmAjxEjhNcp88Ud5bxyV8Ikuj7r19gYx/s1600/overlay.png) repeat-x 0 -40px;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjprLYh4iTE7Jfa7yixk2zKOT7emKGVBf8ZMH9MEJkCCj6hxV5YfMFCZyB07c_eRgtmxe7ee7Pjz65dmNvnuJeqWL6h7L3ILjhfJ-XNMqSydTfoFmAjxEjhNcp88Ud5bxyV8Ikuj7r19gYx/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/AVvXsEjprLYh4iTE7Jfa7yixk2zKOT7emKGVBf8ZMH9MEJkCCj6hxV5YfMFCZyB07c_eRgtmxe7ee7Pjz65dmNvnuJeqWL6h7L3ILjhfJ-XNMqSydTfoFmAjxEjhNcp88Ud5bxyV8Ikuj7r19gYx/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/AVvXsEjprLYh4iTE7Jfa7yixk2zKOT7emKGVBf8ZMH9MEJkCCj6hxV5YfMFCZyB07c_eRgtmxe7ee7Pjz65dmNvnuJeqWL6h7L3ILjhfJ-XNMqSydTfoFmAjxEjhNcp88Ud5bxyV8Ikuj7r19gYx/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://alttuts.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img alt="Drop Down Menus" border="0" src="https://bitly.com/alttutspng1" style="bottom: 10%; position: fixed; right: 0%; top: 0px;" /></a><a href="http://alttuts.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img alt="CSS Drop Down Menu" border="0" src="https://bitly.com/alttutspng1" style="bottom: 10%; position: fixed; right: 0%;" /></a><a href="http://alttuts.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img alt="Pure CSS Dropdown Menu" border="0" src="https://bitly.com/alttutspng1" 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><a href="http://alttuts.blogspot.com/" target="_blank">Widgets</a></li><li><a href="http://alttuts.blogspot.com/" target="_blank">Menus</a></li><li class="last"><a href="http://alttuts.blogspot.com/" target="_blank">Products</a></li></ul></li><li class="has-sub"><a href="http://alttuts.blogspot.com/" target="_blank">Company</a><ul><li><a href="http://alttuts.blogspot.com/" target="_blank">About</a></li><li class="last"><a href="http://alttuts.blogspot.com/" target="_blank">Location</a></li></ul></li><li class="last"><a href="http://alttuts.blogspot.com/" target="_blank">Contact</a></li></ul></div>
No comments:
Post a Comment