Text only CSS Menu

A simple, cross browser compatible horizontal CSS menu, no images or javascript.

Demo:

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Menu text only</title>
</head>
<body>

<div class="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<br />
</div>

</body>
</html>

CSS code:

/* CSSTerm.com CSS Horizontal menu text only */

.navigation ul,.navigation li {
list-style-type:none;
display:inline;
margin:0px 10px;
}

.navigation a:link, .navigation a:visited, .navigation a:active {
font-size:15px;
color:#5D7393;
border-bottom:3px #5D7393 solid;
padding:5px 5px 5px 5px;
text-decoration: none;
}

.navigation a:hover {
border-bottom:5px solid #F9F044;
color:#000;
}

Previous page: Horizontal CSS Menu

Next page: Simple Horizontal Menu