When I test the hover state of the mainMenu, I don’t see the rounded cornered on the tab on the right hand side of the screen, all I see is a non-rounded corner on the right hand side of the tab. Could someone please tell me how to fix this? I am using XHTML 1.0 Strict as the doctype. Thanks in advance.
#mainMenu {
float:left;
width:100%;
font-size: 14px;
list-style:none;
}
#mainMenu li {
display: inline;
}
#mainMenu a:link, #mainMenu a:visited {
background: url('images/tab-left.gif') no-repeat left top;
margin-right: 1px;
padding: 5px 4px 5px 5px;
text-decoration:none;
color: #000;
}
#mainMenu a:link span, #mainMenu a:visited span {
background: #DADADA url('images/tab-right.gif') no-repeat right top;
color:#000;
margin-right: 1px;
text-decoration:none;
padding: 5px 4px 5px 5px;
}
#mainMenu a:hover {
margin-right: 1px;
color: #000;
text-decoration: none;
background: bottom left;
padding: 5px 4px 5px 5px;
}
#mainMenu a:hover span {
margin-right: 1px;
color: #000;
text-decoration: none;
background: bottom right;
background: #C2C1C1;
padding: 5px 4px 5px 5px;
}
<ul id="mainMenu">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Partner Profiles</span></a></li>
<li><a href="#"><span>Photos</span></a></li>
<li><a href="#"><span>Careers</span></a></li>
<li><a href="#"><span>Client Base</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Sitemap</span></a></li>
</ul>