我有一個純CSS的下拉菜單,在IE8和FF它很好,但兼容模式IE7和IE6它不工作。在IE 6和7純CSS下拉菜單問題
的事情是,它並下拉 - 但是,當鼠標越過低於主網站的橫幅,這在它有一個龐大的圖像,在下拉菜單中消失......
我不想在此處放置鏈接,因此,您可以從我的個人資料中找到該網站。
但是,這裏有一些代碼。菜單首先。
<ul id="menu">
<li><a href="***.php" title="Unihost Web Hosting Home Page">Home</a></li>
<li><a href="#">Company</a>
<ul>
<li><a href="***.php" title="About Unihost">About us</a></li>
<li><a href="***.php" title="We're going green, are you?">Going Green</a></li>
<li><a href="***.php" title="Unihost Privacy Policy">Privacy policy</a></li>
<li><a href="***.php" title="Unihost Terms and Conditions">Terms and conditions</a></li>
</ul>
</li>
<li><a href="">Products</a>
<ul>
<li><a href="***.php" title="Register a domain with us" target="_blank">Domain Registrations</a></li>
<li><a href="***.php" title="PHP Web hosting packages">PHP Web Hosting Packages</a></li>
<li><a href="***.php" title="Our E-mail hosting packages">Email Hosting Packages</a></li>
</ul>
</li>
<li><a href="">Contact us</a>
<ul>
<li><a href="***.php" title="Contact support" target="_blank">Support</a></li>
<li><a href="***.php" title="Pre-sales Questions" target="_blank">Pre-sales Questions</a></li>
</ul>
</li>
<li><a href="">Client Area</a>
<ul>
<li><a href="***.php" target="_blank">Register</a></li>
<li><a href="***.php " target="_blank">Login</a></li>
<li><a href="***" target="_blank">Client Area</a></li>
<li><a href="***" target="_blank">Knowledgebase</a></li>
<li><a href="***" target="_blank">Help Ticket System</a></li>
</ul>
</li>
</ul>
的CSS其次高達
ul {
font-family:Verdana, Geneva, sans-serif, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:700;
list-style:none;
float:right;
margin:0;
padding:0;
}
ul li {
display:block;
position:relative;
float:left;
border-right:1px solid #ccc;
}
li ul {
display:none;
}
ul li a {
display:block;
text-decoration:none;
color:#c00;
border-top:1px solid #ededed;
background:#ededed;
margin-left:1px;
white-space:nowrap;
text-transform:uppercase;
padding:8px 15px;
}
ul li a:hover {
background:#c00;
color:#fff;
}
li:hover ul {
display:block;
position:absolute;
border-right:0;
}
li:hover li {
float:none;
font-size:11px;
border-right:0;
}
li:hover a {
background:#444;
color:#fff;
border-top:1px solid #555;
border-right:0;
text-align:left;
}
li:hover li a:hover {
background:#dedede;
color:#c00;
border-right:0;
}
任何幫助將不勝感激。提前致謝。
我會建議完全重做你的HTML,這次只使用表格表格數據表... – 2010-09-14 10:23:49
我看到了,所以 - 去div和css是他們前進的方向嗎? – Sarah 2010-09-14 10:50:03
嘗試#menu {zoom:1; } – James 2010-09-14 12:33:09