Dynamic Drive CSS Library- Clean Arrow Underline Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Clean Arrow Underline Menu

Author: Dynamic Drive

This menu uses the nifty CSS Triangles technique to create a clean horizontal UL menu with a thick arrow border applied to the currently active menu item. It uses no images nor any extranous markup (thanks to CSS generated content) to accomplish the effect, and as a bonus, the menu can be easily aligned "left", "center", or "right' on the page. Cool!

The CSS:

<style>

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 */
}

</style>

The HTML:

<ul class="arrowunderline">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">New</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/revised.htm">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://tools.dynamicdrive.com/style/">CSS</a></li>	
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>	
</ul>

Code Info

Rate this code:

Date Posted: 04/20/2011

Revision History: None

Usage Terms: Click here

Your Comments (2)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

Simple design, but looks good. I think I'll use it for my website!

Posted by Daniel on 04/21, 06:44 AM

Well! This menu looks nice. Like it so much, but would it compatible to all the browser?

Posted by Jornes on 05/19, 05:46 AM

Comment Pages 1 of 1 pages

Commenting is not available in this weblog entry.