Member Avatar for allhimachal.com 
<html>
<head>
<style type="text/css">

#coolmenu{
border: 1px solid black;
width: 170px;
background-color: #E6E6E6;
}

#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

</style>
</head>
<body>

<div id="coolmenu">
<a href="http://www.example.com">Example 1</a>
<a href="http://www.example.com/">Example 2</a>
<a href="http://www.example.com">Example 3</a>
<a href="http://www.example.com">Example 4</a>
<a href="http://www.example.com">Example 4</a>
</div>
</body>
  • 2 Contributors
  • 1 Reply
  • 132 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by macneato
Member Avatar for macneato

Cooler CSS Menu

<!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=iso-8859-1" />
<title>Menu</title>
<style type="text/css">

#navigation {height:176px; margin-left:10px;margin-top:5px;width:210px; float:left;}

a.menu_link:link{background:url(images/menu_indicator.jpg);background-repeat:no-repeat;background-position: left;padding-left: 15px;text-decoration:none;color:#000000;}

a.menu_link:active{background:url(images/menu_indicator_over.jpg);background-repeat:no-repeat;background-position: left;padding-left: 15px;text-decoration:none;color:#000000;}

a.menu_link:visited{background:url(images/menu_indicator.jpg);background-repeat:no-repeat;background-position: left;padding-left: 15px;text-decoration:none;color:#000000;}
	
a.menu_link:hover{background:url(images/menu_indicator_over.jpg);background-repeat:no-repeat;background-position: left;padding-left: 15px;text-decoration:none;color:#000000;}

</style>
</head>

<body>

<div id="navigation">
  <p><a href="#navigation" class="menu_link">Example 1 </a></p>
  <p><a href="#navigation" class="menu_link">Example 2 </a></p>
  <p><a href="#navigation" class="menu_link">Example 3</a></p>
  <p><a href="#navigation" class="menu_link">Example 4 </a> </p>
  <p><a href="#navigation" class="menu_link">Example 5 </a> </p>
  <p><a href="#navigation" class="menu_link">Example 6 </a> </p>
</div>

</body>
</html>

NB: Rather link the CSS

menu_indicator.jpg 0.44 KB menu_indicator_over.jpg 0.49 KB
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.