Проблемы с меню CSS с Safari и Chrome

Question

пытается исправить ошибку CSS для кода, написанного кем-то другим. Я не эксперт по CSS, поэтому у меня возникают проблемы с поиском того, что дает мне эту проблему. На этой странице должно быть 4 кнопки главного меню вверху. Пользователь может нависнуть над каждым и отобразит подменю. Это отлично работает в FF и IE, но в Safari и Chrome кнопки заканчиваются в одном и том же месте, заставляя их отображать подменю при наведении курсора на первую кнопку.

Ссылка на HTML: http://www.blogtrog.com/code.aspx?id=c4c62a1a-af8f-4bfc-a3c3-f1fbf9013b3d

Вот кусок CSS, который контролирует главное меню:

.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

Под ul#menu добавить

position: absolute;