If you look at the menu bar at http://www.sourcevibe.com you see the background to each link repeats itself.. I want different background images to each link. I know this is a simple fix but I can't figure it out. Here is my css.
#menuh
{
float:center;
font-size: 15pt;
font-family: helvetica, sans-serif;
margin-left: 360px;
margin-top:5px;
}
#menuh a
{
text-align: center;
display:block;
white-space:nowrap;
margin:0;
padding: 0.8em;
line-height:15px;
font-size: 10pt;
}
#menuh a, #menuh a:visited /* menu at rest */
{
color: #0071BD;
background-image: url(http://triwebworks.com/sourcevibe.com/menu/menubar.png);
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:135px; /* width of all menu boxes */
}
#menuh
{
float:center;
font-size: 15pt;
font-family: helvetica, sans-serif;
margin-left: 360px;
margin-top:5px;
}
#menuh a
{
text-align: center;
display:block;
white-space:nowrap;
margin:0;
padding: 0.8em;
line-height:15px;
font-size: 10pt;
}
#menuh a, #menuh a:visited /* menu at rest */
{
color: #0071BD;
background-image: url(http://triwebworks.com/sourcevibe.com/menu/menubar.png);
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:135px; /* width of all menu boxes */
}
Here is the Menu
<link rel="stylesheet" type="text/css" href="menu/menuh.css">
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:center;}
body{behavior:url(menu/csshover.htc); font-size:100%;}
#menuh ul li{float:center; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
<div id="menuh">
<ul>
<li><a href="http://www.sourcevibe.com">HOME</a></li>
</ul>
<ul>
<li><a href="http://www.sourcevibe.com/account/member_search.php">MEMBER SEARCH</a></li>
</ul>
<ul>
<li><a href="http://www.sourcevibe.com/aboutus.php">ABOUT US</a></li>
</ul>
<ul>
<li><a href="http://www.sourcevibe.com/contactus.php">CONTACT US</a></li>
</ul>
</div>