This CSS horizontal underline menu looks very elegant and clean. It’s suitable for neat designs which are not overfulled by images and where less means more. Menu item selection is done as simple underline which emphasizes by hover.
CSS Thick Underline Menu supports centering or aligning on the page by simple change of the text-align CSS property value. CSS and HTML code (stated below) is easy includable into any your own code.
CSS Thick Underline Menu Demonstration
CSS Thick Underline Menu Code
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.underlinemenu{
font-weight: bold;
width: 100%;
}
.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}
.underlinemenu ul li{
display: inline;
}
.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}
.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: black;
}
</style>
<div class="underlinemenu"> <ul> <li><a href="http://www.dynamicdrive.com/">Home</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li> <li><a href="http://www.javascriptkit.com/">JavaScript</a></li> <li><a href="http://www.cssdrive.com">Gallery</a></li> </ul> </div>