一千萬個為什麽

搜索

Safari和Chrome的CSS菜單問題

試圖修復別人寫的一些代碼的CSS錯誤。我不是CSS專家,所以我很難找到給我這個問題的東西。該頁面頂部應該有4個主菜單按鈕。用戶可以將鼠標懸停在每個上面,它將顯示一個子菜單。這在FF和IE中工作正常,但在Safari和Chrome中,按鈕最終位於同一位置,當您將鼠標懸停在第一個按鈕上時,它們都會顯示子菜單。

Link to 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; }

最佳答案

ul#menu 下添加

position: absolute;

轉載註明原文: Safari和Chrome的CSS菜單問題