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">@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/AVvXsEiy2RNlD3eVAPxQACDU9trYnqCSPlubbJ4wy_0nyrC8sW7j9MSzAb4d0JkRpgYiiXkvUCjYiAQz4Jk2qy9KnR-k6tc66AI8_wdVD5DM7DUUjvKMyFf0MFlkZg8fTFGC6Jmh9p13IOmnKEmY/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/AVvXsEg3BGdF9ejDi3QQPfqtPhbu_aMUyB-kUFfnDtL56ZaGItHd0p05Tm77G224Bu6VYSX8uESsTg329eVqJtIg_piLcqDcWl_Hb5_0OaiCENA9Khvk8NpsJAJ4WMiMZ4XLlm4Svs__B16kAanE/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/AVvXsEiybpEqKQeEA8Flc8Q6IYqG3C5Y_9aKuuTVv_MY5zXVkiv7MZ_6PbiwNs0j0AI8j8Z_H4W7jfEaXLKjHUlAMuIRGc0IpETxQfrAZXPXWt5ivJLPVNRbwMeQ_iPIC5vOSm1pCgRfVnizz3Iq/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/AVvXsEjqhYU_T57gIgpiTtXxE9VN8o4AsMlpPiZZj7OIhyphenhyphen7TJjCZRx3vfTfNJo_dl0ux0KrFSOEWI-TAMBqtGRn3uS9H2zqCb_iKK1DYCpOsv6jC8knAH-8Ca77XRo8Vw3m-iI7IEFKPBc0x1FMf/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/AVvXsEiy2RNlD3eVAPxQACDU9trYnqCSPlubbJ4wy_0nyrC8sW7j9MSzAb4d0JkRpgYiiXkvUCjYiAQz4Jk2qy9KnR-k6tc66AI8_wdVD5DM7DUUjvKMyFf0MFlkZg8fTFGC6Jmh9p13IOmnKEmY/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/AVvXsEiybpEqKQeEA8Flc8Q6IYqG3C5Y_9aKuuTVv_MY5zXVkiv7MZ_6PbiwNs0j0AI8j8Z_H4W7jfEaXLKjHUlAMuIRGc0IpETxQfrAZXPXWt5ivJLPVNRbwMeQ_iPIC5vOSm1pCgRfVnizz3Iq/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/AVvXsEg3BGdF9ejDi3QQPfqtPhbu_aMUyB-kUFfnDtL56ZaGItHd0p05Tm77G224Bu6VYSX8uESsTg329eVqJtIg_piLcqDcWl_Hb5_0OaiCENA9Khvk8NpsJAJ4WMiMZ4XLlm4Svs__B16kAanE/s1600/menu-bg.png) repeat}</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>
0 comments:
Post a Comment