Fashion Style Navigation Menu Bar Widget For Blogger

Fashion Style or celebrity style navigation menu bar widget for blogger. These nav bar is suitable and good for fashion websites, Style websites or blog. The color combination is very unique of these blogger widgets. Default text color is silver and when you hover your mouse on the text it changes its color into pink color and hence perfect for dating and love websites and blog. There are 2 codes below. I have made a single code for you so that you do not face any problem in adding this blogger widget of navigation menu just like we did in image accordion widget for blogger for recent post. HTML and CSS code are mixed into a single code. You just have to copy the code and paste the code. You can also customize the code. For this look into CSS part in the code. Replace # tag from your links and change the title and description from your page links in these blogger widgets.

<style type="text/css">
#menu8 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
letter-spacing: -2px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:5px solid #fff;
}
#menu8 ul li{
float:left;
}
#menu8 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#fff;
width:170px;
border-left:6px solid #888;
}
#menu8 ul li a span{
display:block;
}
#menu8 ul li a span.title{
color:#888;
}
#menu8 ul li a:hover{
border-left:6px solid #000;
}
#menu8 ul li a:hover span.title{
color:#df246f;

}
#menu8 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
visibility:hidden;
color:#df246f;
text-align:right;
border-top:5px solid #000;
}
#menu8 ul li a:hover span.text{
visibility:visible;
}

</style>

<div id="menu8">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>