2010-09-14 81 views
0

我有一個純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; 
} 

任何幫助將不勝感激。提前致謝。

+0

我會建議完全重做你的HTML,這次只使用表格表格數據表... – 2010-09-14 10:23:49

+0

我看到了,所以 - 去div和css是他們前進的方向嗎? – Sarah 2010-09-14 10:50:03

+0

嘗試#menu {zoom:1; } – James 2010-09-14 12:33:09

回答

3

純粹的CSS菜單有很多問題,尤其是diagonal problem。我建議切換到Javascript - 這應該解決瀏覽器兼容性問題,並使菜單更加可用。

如果您使用的是jQuery,我推薦Superfish

+0

謝謝 - 看起來像生病不得不去Java然後 – Sarah 2010-09-14 10:26:39

+1

作爲一個很大的優勢,Superfish是鍵盤訪問 – steveax 2013-02-21 06:44:47

0

第一件事,IE6已經死了,IE6 Funeral

其次,針對IE7你可能要放z-index在你的ul並用div包裝你的圖像,並把z-index放在它上面。 ul的z索引應高於您用圖像包裝的div的z索引。

+0

我明白了,並且會嘗試一下,謝謝,但是,看看我的分析,IE6在我們的國家並不是很久沒有死。所以,我將不得不迎合他們。這就是說,我真的試圖遠離Java ;-)至少對於菜單。 – Sarah 2010-09-14 10:17:02

+2

-1爲IE6的死亡,這是一個謬論。 – danjah 2010-09-14 10:49:37

+0

如果我爲rob waminal舉行葬禮,是否意味着他已經死了? :確實是p – DisgruntledGoat 2010-09-14 12:50:06

2

您有幾個選項可讓菜單在IE6中工作。這聽起來像你在IE8中使用兼容模式來測試 - 這絕對不是類似於使用IE6來查看網站。

只要在IE6中獲得一個純粹的CSS下拉菜單,簡單的答案就是:你不能,因爲除了<a>之外,IE6不能識別:hover僞類。

IE7.js是一個奇妙的JS庫,可以糾正CSS錯誤,併爲舊版IE添加不受支持的功能,非常值得一看。

您也可以通過實施Pushup來鼓勵用戶升級,您可以在pushuptheweb.com上找到它(對不起,只能發佈1個鏈接)。

說實話,你真的應該像另一張海報建議的那樣去掉你的標記中的表格。這是一種非常過時的佈局技術,可以用很少量的語義HTML和CSS代替。

+0

感謝你 - 我只看到他的評論 – Sarah 2010-09-14 10:50:31