Blogger Arrow Underline CSS Menu

Blogger Arrow underline Css menu let you to underline your UL and LI listing menu this menu is made on CSS triangle technique..

Demo:



How to add to blogger:

step 1:

copy the HTML code and past it in HTML/Javascript widget and drag the widget to the place where you want the menu to be.
<ul class="arrowunderline">
<li><a href="#">Home</a></li>
<li><a href="#">New</a></li>
<li class="selected"><a href="#">Revised</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">CSS</a></li> 
<li><a href="#">Forums</a></li> 
</ul>

step 2:

this is the css part of the menu this lets the menu to work properly if you are good at css you can movify color and other values of the code simply copy the code and past it inside the ]]></b:skin> or go to Design>Template Designer>advanced>add css. Past the code and click on apply to blog.
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
}

ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}

ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;

}

ul.arrowunderline li a:hover{
border-bottom:3px solid purple; /* style of arrow underline */
}

ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px; /* value should match border-width below */
bottom: 0;
border-width:5px; /* value should match margin-left above */
border-style:solid;
border-color: transparent transparent purple transparent; /* create up arrow */
}
Thanks to :

Comments