Z2 A blogger stylish,premium navigation menu

Hie friends,Today I will show your tutorial on blogger navigation menu.It is premium and stylish.
we named it as Z2.

HERE WE GO:-

JUST ADD THIS CSS CODE TO YOUR BLOGGER TEMPLATE.JUST BEFORE ]]></b:skin>

_____________---Z2 Menu BY mybloggerskill.blogspot.in Starts----_______________ #menu-main-nav-1 { margin: 0; padding: 0; position: absolute; bottom: 360px; zoom: 1; z-index: 2; left: 17px; } #menu-main-nav-1 li { display:block; float:left; list-style: none; position:relative; overflow:visible; } #menu-main-nav-1 li a { color: #bfe6f9; font-size: 15px; font-weight: 600; text-decoration: none; padding: 13px 20px; display: block; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0px 1px 0px #1b6183; margin: 7px 0 0 0; background: #0088cd; background: -webkit-gradient(linear, left top, left bottom, from(#0088cd), to(#007fc9)); background: -webkit-linear-gradient(#0088cd, #007fc9); background: -moz-linear-gradient(#0088cd, #007fc9); background: -ms-linear-gradient(#0088cd, #007fc9); background: -o-linear-gradient(#0088cd, #007fc9); background: linear-gradient(#0088cd, #007fc9); } #menu-main-nav-1 li a:hover { box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); background: #1c6285; background: -webkit-gradient(linear, left top, left bottom, from(#1c6285), to(#19597c)); background: -webkit-linear-gradient(#1c6285, #19597c); background: -moz-linear-gradient(#1c6285, #19597c); background: -ms-linear-gradient(#1c6285, #19597c); background: -o-linear-gradient(#1c6285, #19597c); background: linear-gradient(#1c6285, #19597c); text-shadow: 0px 1px 0px #1b6183, 0px 0px 10px #008bce; } #menu-main-nav-1 li.first a { padding-left: 25px; } #menu-main-nav-1 li.last > a { -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; padding-right: 30px; } #menu-main-nav-1 li.themes ul, #menu-main-nav-1 li.plugins ul, #menu-main-nav-1 li.training ul{ margin-top: 5px; border-top: 1px solid #a8d657; } #menu-main-nav-1 li.themes li, #menu-main-nav-1 li.plugins li, #menu-main-nav-1 li.training li{ border-bottom: 1px solid #a8d657; } #menu-main-nav-1 li.themes li a, #menu-main-nav-1 li.plugins li a, #menu-main-nav-1 li.training li a{ padding: 8px 13px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background: #15C3EE; font-size: 15px; letter-spacing: 0px; text-transform: none; display:block; padding: 9px 15px; line-height: 1.3; margin: 0; text-shadow: none; } #menu-main-nav-1 li.themes li a:hover, #menu-main-nav-1 li.plugins li a:hover, #menu-main-nav-1 li.training li a:hover { color: #4A612D; background: #15C3EE; } #menu-main-nav-1 li.themes li span.bg-image, #menu-main-nav-1 li.plugins li span.bg-image, #menu-main-nav-1 li.training li span.bg-image { display:none; } #menu-main-nav-1 li.themes a, #menu-main-nav-1 li.plugins a, #menu-main-nav-1 li.training a { padding: 17px 28px 17px 38px; margin: 0; color: #4a612d; text-shadow: none; font-size: 18px; text-transform: none; letter-spacing: 0px; position: relative; overflow:hidden; } #menu-main-nav-1 li.themes a{ -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; background: #15C3EE /* url(http://mybloggerskill.tk/images/themes-nav.png) -5px center no-repeat;*/; -webkit-animation: all linear .2s; border-right: 1px solid #93bb4c; } #menu-main-nav-1 li.plugins a { background: #c8f57a /*url(http://mybloggerskill.tk/images/plugins-nav.png) -5px center no-repeat;*/; border-right: 1px solid #93bb4c; } #menu-main-nav-1 li.training a{ background: #15C3EE /* url(http://mybloggerskill.tk/images/training-nav.png) -5px center no-repeat; */; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; } #menu-main-nav-1 li.themes a:hover, #menu-main-nav-1 li.plugins a:hover, #menu-main-nav-1 li.training a:hover { /* background-position: left center;*/ box-shadow: none; } li span.bg-image { position: absolute; display:block; z-index: 1000; } li.themes span.bg-image { background: url(images/themes-nav.png) 0 0 no-repeat; left:-10px; top: 17px; width: 30px; height: 30px; } li.plugins span.bg-image { background: url(images/plugins-nav.png) 0 0 no-repeat; left:-21px; top: 11px; width: 43px; height: 43px; } li.training span.bg-image { background: url(images/training-nav.png) 8px -1px no-repeat; left:-10px; top: 20px; width: 41px; height: 26px; } li.first span.bg-image { background: url(images/nav-fade.png) 0 0 repeat-y; height: auto; left: 0; top: 8px; bottom: 0px; width: 30px; } li.first:hover span.bg-image { display:none; } /* Nav when fixed to top of page after scroll */ .builder-module-header-outer-wrapper.fixed { background: rgba(255, 255, 255, 0.92); position: fixed; width: 100%; padding-bottom: 5px !important } .admin-bar .builder-module-header-outer-wrapper.fixed { top:28px; } .builder-module-header-outer-wrapper.fixed { top:0; } #menu-main-nav-1.fixed { float:right; position: relative; bottom: 0; margin-top: 10px; } .site-title.fixed { margin: 5px 0 3px 0; padding: 5px 0 3px 0; width: 49px; height: 46px; } .site-title.fixed a { width: 49px; height: 46px; background: url(images/logo-fixed.png) 0 0 no-repeat; } #menu-main-nav-1 li.themes.fixed a, #menu-main-nav-1 li.plugins.fixed a, #menu-main-nav-1 li.training.fixed a { padding: 8px 25px 8px 35px } li.themes.fixed span.bg-image {top: 8px;} li.plugins.fixed span.bg-image {top: 2px;} li.training.fixed span.bg-image {top: 10px;} /* Second Level Nav */ #menu-main-nav-1 ul { position: absolute; left: -22px; top: 58px; width: 200px; background: #e4ecf1; padding: 0; display:none; z-index: 1000; } #menu-main-nav-1 .themes ul { left: -18px; } #menu-main-nav-1 ul li { display:block; background: none; padding: 0px; border-bottom: 1px solid #d4e0e6; width: 100%; } #menu-main-nav-1 ul li a { background: none; font-size: 16px; color: #4a5d68; letter-spacing: 0px; text-transform: none; display:block; padding: 9px 15px; line-height: 1.3; margin: 0; text-shadow: none; } #menu-main-nav-1 ul li a:hover { background: none; box-shadow: none; text-shadow: none; color: #0081ca; } #menu-main-nav-1 li:hover > ul { display: block; } /* Responsive Navigation - select Menu */ body { background: #ffffff; color: #444444; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.7; } input, select, textarea { font-family: 'Open Sans', Helvetica, Arial, sans-serif; } pre, code, tt, kbd { font-family: 'andale mono', 'lucida console', monospace; font-size: 1em; line-height: 1.5; } .responsiveMenuSelect { background: #fff; float:right; max-width: 450px; margin: 20px; border: none; border-bottom: 3px solid #0086cc; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding: 10px; outline: none; height: 50px; font-size: 16px; font-family: 'Open Sans'; -webkit-appearance: none; } .responsiveMenuSelect option { font-family: 'Open Sans'; } __---Z2 Menu BY mybloggerskill.blogspot.in ENDS---___________

NOW FOR HTML PART-

<div class=" responsiveSelectContainer"><ul id="menu-main-nav-1" class="menu responsiveSelectFullMenu"><li class="themes menu-item menu-item-type-custom menu-item-object-custom menu-item-11583" style="display: block;"><a href="#"><span class="bg-image" style="-webkit-transform: rotateY(0deg);"></span>Themes</a><ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11590" style="display: block;"><a title="MBS" href="#"><span class="bg-image" style="-webkit-transform: rotateY(0deg);"></span>WordPress Web Designer’s Toolkit</a></li>

</ul>
</li>
<li class="plugins menu-item menu-item-type-custom menu-item-object-custom menu-item-11591" style="display: block;"><a href="#"><span class="bg-image" style="-webkit-transform: rotate(0deg);"></span>Plugins</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11596" style="display: block;"><a title="Free WordPress Plugins" href="#"><span class="bg-image" style="-webkit-transform: rotate(0deg);"></span>Free Plugins</a></li>
</ul>
</li>
<li class="training menu-item menu-item-type-custom menu-item-object-custom menu-item-11597" style="display: block;"><a title="WordPress Training" href="#"><span class="bg-image" style="-webkit-transform: perspective(100px) rotateX(0deg);"></span>Training</a></li>
<li class="first menu-item menu-item-type-custom menu-item-object-custom menu-item-11598" style="display: block;"><a href="#"><span class="bg-image"></span>Blog</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11599" style="display: block;"><a title="About Mybloggerskill" href="#"><span class="bg-image"></span>About</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11605" style="display: block;"><a title="" href="#"><span class="bg-image"></span>Work for Us</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11606" style="display: block;"><a title="WordPress Resources" href="#"><span class="bg-image"></span>Resources</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11609" style="display: block;"><a title="%" href="#"><span class="bg-image"></span>Builder Training</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11610" style="display: block;"><a title="" href="#"><span class="bg-image"></span>Support</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11611" style="display: block;"><a title="Forum Tutorials" href="#"><span class="bg-image"></span>Forum Tutorials</a></li>
</ul>
</li>
<li class="last menu-item menu-item-type-custom menu-item-object-custom menu-item-11612" style="display: block;"><a title="Contact Mybloggerskill" href="#"><span class="bg-image"></span>Contact</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11613" style="display: block;"><a title="Frequently Asked Questions" href="#"><span class="bg-image"></span>FAQ</a></li>
</ul>
</li>
</ul></div>