In Action

Simple CSS Menu

Example of a simple CSS menu using the html list tag and a little CSS.

Example








CSS Code

CSS Code for Simple Menu               

  

<style type="text/css">
.tmnu
{
	width: 100%;
	background-color: #000080; 
}
.tmnu ul
{
	margin: 0; 
  padding: 1px;  
	float: left;		
}
.tmnu ul li
{
	display: inline;
}
.tmnu ul li a
{
  font-family: Arial,Times New Roman; 
  font-size: .75em;
	float: left; 
  text-decoration: none;
	color: white; /*text color*/
	padding-top: 1px;
  padding-bottom: 1px;
	padding-left: 14px;
  padding-right: 14px;  
	background-color: #000080; 
}
.tmnu ul li a:visited
{
	color: white;
}
.tmnu ul li a:hover, .menu ul li .current
{
	color: #000000;
	background-color: #e0eeee;
}
</style>
 

HTML Code

HTML Code for Simple Menu               

 
</script>
<div class="tmnu">
<ul>
<li><a href="#nada">One</a></li>
<li><a href="#nada">Two</a></li>
<li><a href="#nada">Three</a></li>
</ul>
</div>