Problèmes de menu CSS avec Safari et Chrome

Question

en essayant de corriger un bogue CSS pour du code que quelqu'un d'autre a écrit. Je ne suis pas un expert CSS, donc j'ai du mal à trouver ce qui me pose problème. Cette page est censée avoir 4 boutons de menu principal en haut. L'utilisateur peut survoler chacun d'eux et il affichera un sous-menu. Ce travail fonctionne bien dans FF et IE, mais dans Safari et Chrome, les boutons se retrouvent au même endroit, les obligeant tous à afficher des sous-menus lorsque vous passez la souris sur le premier bouton.

Lien vers HTML: http://www.blogtrog.com/code.aspx?id=c4c62a1a-af8f-4bfc-a3c3-f1fbf9013b3d

Voici le morceau de CSS qui contrôle le menu principal:

.top-bar { 
    background: url('/img/top-gradient.jpg') repeat-x top; 
    height : 50px; 
} 

.top-bar-content { 
    width : 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.menu-bar { 
    background : url('/img/menu-gradient.jpg') repeat-x top; 
    height : 25px; 
    vertical-align : middle; 
} 

.menu-bar-content { 
    height : 25px; 
    width : 1000px; 
    color : #ffffff; 
    font-weight : bold; 
    margin-left: auto; 
    margin-right: auto; 
} 

.footer-bar { 
    width : 1000px; 
    text-align : right; 
    margin-left: auto; 
    margin-right: auto; 
} 

hr { 
    border : none 0; 
    border-top : 1px dashed #333333; 
    width : 100%; 
    height : 1px; 
} 

    /* menu */ 

ul#menu 
    { margin:0; padding:1px 0; list-style:none; width:1000px; height:21px; font:normal 12px arial, verdana, helvetica; font-weight: bold;} 
ul#menu li 
    { margin:0; padding:0; display:block; float:left; position:relative; width:160px; } 
ul#menu li a:link, 
ul#menu li a:visited 
    { padding:4px 0; display:block; text-align:left; text-decoration:none; color:#ffffff; width:160px; height:13px; } 
ul#menu li:hover a, 
ul#menu li a:hover, 
ul#menu li a:active 
    { padding:4px 0; display:block; text-align:left; text-decoration:none; color:#ffffff; width:158px; height:13px; } 

    /* sub menu */ 

ul#menu li ul.sub-menu 
    { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:158px; position:absolute; top:21px; left:-1px; border:1px solid #990000; border-top:none; } 
ul#menu li:hover ul.sub-menu 
    { display:block; } 
ul#menu li ul.sub-menu li 
    { width:158px; clear:left; width:158px; } 

ul#menu li ul.sub-menu li a:link, 
ul#menu li ul.sub-menu li a:visited 
    { clear:left; background:#d6d6d6; padding:4px 0; width:158px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; color:#333333;} 
ul#menu li ul.sub-menu li:hover a, 
ul#menu li ul.sub-menu li a:active, 
ul#menu li ul.sub-menu li a:hover 
    { clear:left; background:#d6d6d6; padding:4px 0; width:158px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } 

    /* sub sub menu */ 

ul#menu li ul.sub-menu li ul.sub-sub-menu 
    { display:none; margin:0; padding:0; list-style:none; position:absolute; left:157px; top:-2px; padding:1px 1px 1px 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; } 
ul#menu li ul.sub-menu li:hover ul.sub-sub-menu 
    { display:block; } 
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:link, 
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:visited 
    { background:#d6d6d6; } 
ul#menu li ul.sub-menu li ul.sub-sub-menu li:hover a, 
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:hover, 
ul#menu li ul.sub-menu li ul.sub-sub-menu li a:active 
    { background:#d6d6d6; } 

    /* span style */ 
ul#menu li ul.sub-menu li a span 
    { position:absolute; top:0; left:144px; font-size:12pt; color:#990000; } 
ul#menu li ul.sub-menu li:hover a span, 
ul#menu li ul.sub-menu li a:hover span 
    { position:absolute; top:0; left:144px; font-size:12pt; color:#ffffff; } 

Answer 1

Sous ul#menu ajouter

position: absolute;