Subscribe For Free Updates!

We'll not spam mate! We promise.

Sunday, 22 June 2014

Beautiful And Stylish Sub Menu Navigation Bar / Menu Bar

How To Make Beautiful And Stylish Navigation Bar / Menu Bar With Sub Menu For Blogger.



Copy CSS Codes And Paste Between <b:skin>---</b:skin>

.navbar 

 background-color: #08416C; 
 height: 45px; 
 color: #fff; 

 .navbar.small 
 { 
 height: 4px; 

 .menu-bar 

 height: 44px; 
 line-height: 44px; 
 float: left; 
 left:50px; 
 position: relative; 
 padding: 0 30px; 
 color: white; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; 

 .menu-bar.active, .menu-bar:hover 

 height: 43px; 
 background-color: #063456; 
 border-bottom: 3px solid #0091DD; 
 font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

 .menu-bar a 

 color: #fff; 
 text-decoration: none; 
 } 
 li 

list-style-type: none; 

 .navbar li ul

 display:none; 

 ul li a 
 { 
 display: block;
 text-decoration: none; 
 color: #ffffff; 
 border-top: 1px 
solid #ffffff; 
 padding: 0 30px; 
 background: #2C5463; 
 margin-left: 1px; 
 white-space: nowrap; 
 width:80px; 
 } 
 ul li a:hover 
 { 
 background-color: #063456; 
 width:80px; 
 border-bottom: 3px solid #0091DD; 
 } 
li:hover ul 
 { 
 display: block; 
 position: absolute; 
 margin-top:2px; 
 padding: 0 30px; 
 height:30px; 
 left:-30px; 
 font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
 } 
 li:hover li 

 float: none; 
 font-size: 11px;

 li:hover li a:hover 
 { 
 background-color: #063456;
 }



Html Codes

<div class="navbar">

<li class="menu-bar active">

<a href="#" >Home</a></li>
                           
<li class="menu-bar">
<a href="#"> Computer</a> </li>

<li class="menu-bar">
<a href="#">Product</a> 
<ul> <li> <a href="#" > Product 1 </a> </li> 
 <li> <a href="#" > Product 2 </a> </li>  
 <li> <a href="#" > Product 3 </a> </li> </ul> </li>


<li class="menu-bar">
<a href="#">Blogger Tips</a>
<ul> <li> <a href="#" > Begginer Tips </a> </li> 
 <li> <a href="#" > Blogger Widgets </a> </li> 
 <li> <a href="#" > Drop Menu </a> </li> </ul>  </li>

                                </div>







Socializer Widget By Tips And How
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 comments:

Post a Comment