試圖修復其他人編寫的代碼的CSS錯誤。我不是CSS專家,所以我無法找到什麼給我這個問題。該頁面應該在頂部有4個主菜單按鈕。用戶可以懸停在每一個上,它會顯示一個子菜單。這項工作在FF和IE中很好,但在Safari和Chrome中,按鈕最終位於同一位置,因此當您將鼠標懸停在第一個按鈕上時,這些按鈕都會顯示子菜單。Safari和Chrome的CSS菜單問題
鏈接到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; }
伴隨HTML將是有益的。 – 2010-04-16 15:01:59
好吧,我想弄清楚如何整齊地發佈它。 – user305527 2010-04-16 15:27:44
或者是一個實時演示的鏈接http://jsbin.com/(等等)允許你發佈html/css/js來創建用於演示目的的臨時頁面。 – 2010-04-16 17:12:00