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 block :

.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;