I have a two level menu - I want to hover a different color - it works fine on the submenu - but on the main menu it just changes over the words. This is my example:

http://webpages.charter.net/jukoenig/alaarktest/testingindex.htm

This is the code:

<style type=“text/css”>

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: top;
position: relative;
width: 10em;
}

#csstopmenu li a:hover{
background-image: url(../images/ButtonOvr.jpg);
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 1px solid black;
border-left-width: 1px;
background-image: url(../images/button.jpg);
}

.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}

.submenus{
display: none;
width: 10em;
position: absolute;
top: 0em;
left: 10em;
border: 1px solid black;
background-image: url(../images/buttonsub.jpg);

}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
font-weight: bold;
color: black;
text-indent: 3px;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
border: 1px solid black;
border-left-width: 1px;
background-image: url(../images/ButtonOvrSub.jpg);

}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type=“text/javascript”>

startMenu = function() {
if (document.all&&document;.getElementById) {
cssmenu = document.getElementById(“csstopmenu”);
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}

you can write it as:

.headerlinks a{
margin: 0;
padding:0 8px;
font-weight: bold;
color: black;
display:block;
}