Awesome Orange CSS3 Top Menu Bar Widget on Blogger-TRICKS AND TIPS

This is the another Awesome Orange CSS3 menu bar widget on blogger . this CSS3 widget will easily install to blogger and websites . i have above posted with Awesome Blue vertical menu bar widget on blogger . this css3 menu bar widget on your blog will stylish . this will be add to your blog all people will like your blog and you get more site visitors .this will be add to your blog easily in one step you can not go on templates

ADD AWESOME ORANGE CSS3 MENU WIDGET ON BLOG

LOG ON BLOGGER

CLICK ON LAYOUT

CLICK ON ADD GADGET

THEN YOU CLICK THE HTML/JAVASCRIPT

YOU WILL PASTE IT THE BELOW two CODE ON IT

ul#css3menu7,ul#css3menu7 ul{ margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;} ul#css3menu7 ul{ display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#ffd94e;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;padding:0 10px 10px;} ul#css3menu7 li:hover>*{ display:block;} ul#css3menu7 li{ position:relative;display:block;white-space:nowrap;font-size:0;float:left;} ul#css3menu7 li:hover{ z-index:1;} ul#css3menu7{ font-size:0;width:100%;z-index:999;position:relative;display:inline-block;zoom:1;padding:0 0%;margin:0 0%; *display:inline;*padding-right:0.94%;} * html ul#css3menu7 li a{ display:inline-block;} ul#css3menu7>li{ margin:0;width:14%;} ul#css3menu7 li.toplast{ width:16%;} body:first-of-type ul#css3menu7{ display:inline-table;border-spacing:0px 0;} body:first-of-type ul#css3menu7>li{ display:table-cell;float:none;} ul#css3menu7 a:active, ul#css3menu7 a:focus{ outline-style:none;} ul#css3menu7 a{ display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 16px "Arial Black",Gadget,sans-serif;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#ffa60b;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;} ul#css3menu7 ul li{ float:none;margin:10px 0 0;} ul#css3menu7 ul a{ text-align:center;padding:4px;background-color:#ffd94e;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:italic 14px "Arial Black",Gadget,sans-serif;color:#000;text-decoration:none;} ul#css3menu7 li:hover>a,ul#css3menu7 li a.pressed{ background-color:#ffaa00;border-color:#C0C0C0;border-style:solid;color:#000000;text-shadow:#FFF 0 0 1px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA41KpTYroIAAACASURBVCjP7ZE7DsJADESfJiL37znNXoJLUNARa7Ni6Bw5AtFEqXAx8vj/wfZNwBBAakPAWukQEJUu1RGVLt9su4yo9eJ3t0FrDWyTg58HezlujFPE9lXAQ8BdQM93R9LtM2ve/vnB22tcF/DaTpItJwHKVWcBk4BLwlw1/nAUvAGm30u0udPq+QAAAABJRU5ErkJggg==");background-position:0 100px;text-decoration:none;} ul#css3menu7 span{ display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;} ul#css3menu7 ul li:hover>a,ul#css3menu7 ul li a.pressed{ background-color:#ffd94e;background-image:none;color:#ff7a05;text-decoration:none;} ul#css3menu7 li.topfirst>a{ border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;} ul#css3menu7 li.topmenu>a{ -moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;} ul#css3menu7 li.toplast>a{ border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;} ul#css3menu7>li:nth-child(1){width:10%}ul#css3menu7>li:nth-child(2){width:12%}ul#css3menu7>li:nth-child(3){width:16%}ul#css3menu7>li:nth-child(4){width:8%}ul#css3menu7>li:nth-child(5){width:23%}ul#css3menu7>li:nth-child(6){width:17%}ul#css3menu7>li:nth-child(7){width:14%} @-moz-document url-prefix(){body:first-of-type ul#css3menu7{display:inline-block} body:first-of-type ul#css3menu7>li{display:block;float:left !important;}} <ul class='topmenu' id='css3menu7'> <li class='topfirst'><a href='http://www.blogspot.com' style='height:23px;line-height:23px;' title='Home'>Home</a></li> <li class='topmenu'><a href='http://www.blogspot.com/search/label/Blog%20Tips' style='height:23px;line-height:23px;' title='Blogger'><span>Blogger</span></a> <ul> <li><a href='http://www.blogspot.com/search/label/Blog%20Widget' title='Blogger Widget'>Blogger Widget</a></li> <li><a href='http://www.blogspot.com/search/label/Menu' title='Blogger Menu'>Blogger Menu</a></li> <li><a href='http://www.blogspot.com/search/label/Blogger' title='Blogger Tricks'>Blogger Tricks</a></li> </ul></li> <li class='topmenu'><a href='http://www.blogspot.com/search/label/Wordpress' style='height:23px;line-height:23px;' title='WordPress'><span>WordPress</span></a> <ul> <li><a href='http://www.blogspot.com/search/label/Wordpress%20Plugins' title='WordPress Plugins'>WordPress Plugins</a></li> <li><a href='http://www.blogspot.com/search/label/Wordpress%20Theme' title='WordPress Themes'>WordPress Themes</a></li> <li><a href='http://www.blogspot.com/search/label/Wordpress' title='WordPress Tricks'>WordPress Tricks</a></li> </ul></li> <li class='topmenu'><a href='http://www.blogspot.com/search/label/Hosting' style='height:23px;line-height:23px;' title='Hosting'>Hosting</a></li> <li class='topmenu'><a href='http://www.blogspot.com/search/label/Computer%20Tricks' style='height:23px;line-height:23px;' title='Computer Tricks'>Computer Tricks</a></li> <li class='toplast'><a href='http://www.blogspot.com/p/adverts-with-me.html' style='height:23px;line-height:23px;' title='Advertise Here'>Advertise</a></li> </ul>  </div>