Safari和Chrome的CSS菜单问题

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;