Ciao a tutti

Ho un menù che funziona come dovrebbe su firefox, chrome, exporer 9 ma quando lo provo sul 7 e 8 non vuole proprio saperne.

Il codice è:

#navcontainer {
height:100px;
padding:0px;
margin-left:350px;
background: transparent;
float:left;
margin-top:17px;
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
#navlist {
height:100px;
padding:0px;
margin:0px;
float:left;
}
#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a {
text-align:center;
padding: 10px 20px;
color:#FFFFFF;
font-size:17px;
font-weight:bolder;
}
#navlist a:link{
background: #cc6602 ;
text-decoration:none;
width:200px;
}
#navlist a:visited {
background: #cc6602 ;
text-decoration:none;
width:200px;
}

#navlist a:hover {
background:#d03507;
border-bottom:60px #d03507 solid;
}

ul#navlist li a#current {
text-align:center;
color:#FFFFFF;
border-bottom:60px #d03507 solid;
font-weight:bold;
background:#d03507;
}

In pratica quando posiziono il mouse sul una voce ( in realtà appare modificata anche la voce corrente) invece di far apparire uno spessore di 60px appare solo una striscia del colore desiderato che ricopre solo il nome del link.
Spero di esser stato chiaro.......

Potreste darmi una mano?

Il codice html è:
<div id="navcontainer">
<ul id="navlist">
<li id="active">Home
[*]About
[*]Faq
[*]Materiale
[*]Contatti
[/list]
</div>