http://www.thelisthq.net/datetest.php垂直菜單:將鼠標懸停在休息IE
如果您在火狐,Chrome瀏覽網頁,或IE 8的兼容性模式關閉垂直菜單正常工作。我的策略是將整個菜單向右移動並顛倒子彈(右側的子彈)。 如果您在早期版本的ie中查看它,它會中斷。我想不出如何解決這個問題,我嘗試了不同的文檔類型,許多小小的調整,但似乎無法讓它正常工作。任何人都知道修補程序,或有任何見解?
http://www.thelisthq.net/datetest.php垂直菜單:將鼠標懸停在休息IE
如果您在火狐,Chrome瀏覽網頁,或IE 8的兼容性模式關閉垂直菜單正常工作。我的策略是將整個菜單向右移動並顛倒子彈(右側的子彈)。 如果您在早期版本的ie中查看它,它會中斷。我想不出如何解決這個問題,我嘗試了不同的文檔類型,許多小小的調整,但似乎無法讓它正常工作。任何人都知道修補程序,或有任何見解?
我修正了這個CSS。您可能需要應用clearfix上#sidenav ul
:
#sidenav ul{
/* removed: float:right; */
padding:0;
white-space:nowrap;
/* removed: direction:rtl; */
}
#sidenav li{
font-size: 16px;
font-family:"Times New Roman", Times, serif;
list-style-type:none;
width:220px;
background: #2a3940;
color: #FFF;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 15px;
text-align:center;
/* removed: direction: ltr; */
/* added: */
float: right;
}
對不起,不看你的代碼,但我很快就試圖基於什麼我可以在網頁上看到的推出自己的。
作品在IE6,IE7,火狐(沒有Chrome瀏覽器測試)
注:Ken的答案可能是你的解決方案。
#menu {
width: 200px;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
overflow: hidden;
}
#menu ul li {
margin: 5px 0;
float: right;
}
#menu ul li a {
display: block;
background: #000;
color: #fff;
text-decoration: none;
padding: 4px;
width: 150px;
text-align: center;
}
#menu ul li a:hover { width: 200px; }
和標記:
<div id="menu">
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</div>
那麼簡單。非常感謝,我非常感謝。 – Atomix 2009-07-31 23:16:43