CSS hover problems in Chrome and IE8

I'm having trouble with cross-browser compatibility.

I have a simple menu (with all JS functionality removed for the purpose of this demonstration). The background of the links are meant to go orange when hovered over.

• Firefox (V3.6.17): Works properly.
• Chrome (V11.0.696.60): The Main Links expand with :hover, shifting all the other menu items. I think the padding or margins expand on hover
• Inte开发者_如何学CrnetExplorer (V8): The links show in blue despite defining a colour.

I think the problem would easily be recognised by someone who knows CSS well, but my knowledge isn't up to scratch. An explanation would be greatly appreciated!

Here is the code on JS Fiddle

Here is a portion of the CSS:

#mainlinks  {
    position:absolute;
    display:block;
    overflow:visible;
    margin:0px;
    padding:0px;
}

#mainlinks li {
    display:block;
    position:relative;
    float: left;
    cursor:pointer;
    overflow:hidden;
    padding:4px;
    margin:45px 3px 2px 3px;
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-size: 14px;
    text-decoration:none;
    list-style: none;
}

#mainlinks li :visited {
    text-decoration:none;
    color:#000;
    padding:4px;
    margin:45px 3px 2px 3px;
}

#mainlinks li :hover {
    text-decoration:none;
    color:#FFF;
    padding:4px;
    margin:45px 3px 2px 3px;
    background-color:#f1592a;
}

---

try li:hover instead of li :hover, li:visited instead of li :visited

hope this works ^^

---

you should try applying the text specific styles (ie: color) to the 'a' tag instead of on the LI