[youheardit]

Hej gott folk!
Har ett litet CSS problem med IE 7.0 (som jag använder i detta fall) som inte får samma resultat som Chrome och Safari.

Så här vill jag att det ska se ut (Chrome & Safari) :



Men istället så ser det ut så här i IE (7.0):


Det är då a:hover vi snackar om.

CSS för menyn ser ut så här:

.menu {
width: 700px;
height: 40px;
float: right;
margin-top: 80px;
}
.menu li {
display:inline;
}
.menu li a{
width: 100px;
padding: 10px;
text-align: center; 
text-decoration: none;
font-weight: 500; 
color: #333333;
height: 40px;
width: 100px;

} 
.menu li a:hover {
width: 100px;
padding: 10px;
text-align: center; 
text-decoration: none;
font-weight: 500; 

height: 40px;
width: 100px;
background: #1a1a1a;
color: #FFFFFF;
}

Är det något jag måste ändra i css'en?
har du en lösning till detta så vill jag gärna veta

Tacksam för svar

MvH!
//Philip Andersson!