子菜單不工作在IE瀏覽器和Chrome ..在FF工作，Opera

下面是我寫在HTML中的代碼，我得到了我想要的完美的FF，Opera。我的朋友也能夠在IE中運行，但我不是......另外我無法看到輸出Chrome。任何原因？？子菜單不工作在IE瀏覽器和Chrome ..在FF工作，Opera

<html> 
<head> 
<style> 
#nav, #nav ul { 
    line-height: 1.5em; 
    list-style-position: outside; 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    visibility: visible; 
} 

#nav a:hover { 
    background-color: #FFFFFF; 
    color: #333333; 
} 
#nav li { 
    position: relative; 
    width: 100px; 
} 

#nav ul { 
    display: none; 
    left: 100px; 
    position: absolute; 
    width: 192px; 
    top:0; 
} 

#nav li ul a { 
    float: left; 
    width: 192px; 
} 

#nav ul ul { 
    top:0; 
} 

#nav li ul ul { 
    left: 192px; 
    top:25px; 
    margin: 0 0 0 13px; 
} 

#nav li ul ul ul { 
    left: 192px; 
    top:0px; 
    margin: 0 0 0 13px; 
} 


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ 
    display: none; 
} 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { 
    display: block; 
} 
</style> 
</head> 
<body> 
<ul id="nav"> 
<li><a href="#">cat1</a><ul class="jaccordion"> 
<li><a href="#">cat1.1</a><ul class="jaccordion"></ul></li> 
<li><a href="#">cat1.2</a><ul class="jaccordion"> 
<li><a href="#">cat1.2.1</a><ul class="jaccordion"> 
<li><a href="#">cat1.2.1.1</a><ul class="jaccordion"></ul></li></ul></li></ul></li> 
<li><a href="#">cat1.3</a><ul class="jaccordion"></ul></li> 
</ul></li> 
<li><a href="#">cat2</a><ul class="jaccordion"> 
<li><a href="#">cat2.1</a><ul class="jaccordion"></ul></li></ul></li> 
</ul> 
</body> 
</html>

在此先感謝...

來源

2012-02-04 Fahim Parkar

你還嘗試過其他什麼嗎？如果你還沒有答案，我會在明天發佈解決方案。用智能手機寫作lota文本很爛;） – Christoph 2012-02-05 20:54:40

我添加了解決方案我的答案。測試一下。 – Christoph 2012-02-06 08:27:35

感謝克里斯託弗 – 2012-02-06 08:47:20

你在你的CSS了很多重複的樣式。嘗試消除這些。特別是你有很多規則可以互相重疊。嘗試使用不同層次的類來制定更具體的規則。

編輯：

你需要的所有的CSS代碼：（test it）

#nav, #nav ul { 
    line-height: 1.5em; 
    list-style:none; /* <- shorthand declaration is enough */ 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
} 

#nav a:hover { 
    background-color: #FFFFFF; 
    color: #333333; 
} 
#nav li { 
    position: relative; 
    width: 80px;  /* <- This defines the width, no need to declare elsewhere */ 
} 

#nav ul { 
    display: none; 
    left: 100%;  /* <- % makes you indepentent of declared with in li*/ 
    position: absolute; 
    top:0; 
} 

#nav li:hover > ul{ 
    display:block; /* <- does all the hovermagic for you, no matter how many ul-levels you have */ 
}

有以下幾個原因，該代碼不會在IE 6中工作（如果你需要支持它，你需要一些真正討厭的解決方法）

來源

2012-02-04 19:30:07 Christoph

主要問題是IE在鼠標移過'cat 1'之後，'cat1'的子菜單沒有顯示出來...... – 2012-02-05 03:29:17

感謝大家的幫助:) – 2012-02-06 08:46:53

問題的一部分是，您尚未在HTML中聲明doctype。沒有聲明的doctype會將IE放入quirksmode，然後它的行爲與你期望的不同。

您將要將<!DOCTYPE html>置於文檔的頂部。 Quirksmode Explanation

此外，我認爲有很多強大的解決方案可用，會比你更好一點。如前所述，您聲明瞭許多重複樣式，這可能也會導致您遇到問題。

一個快速的谷歌搜索遊戲與以下解決方案，它工作得很好。 CSS3 Dropdown Menu

我做了一個代碼的快速修改，並將其應用到你的。不知道這是否會完全符合你的要求，但這是一個開始。

<style> 

#nav { 
margin: 0; 
padding: 0; 
list-style: none; 
line-height: 1.5em; 
} 

#nav li { 
    position: relative; 
    width: 100px; 
} 

/* main level link */ 
#nav a:link, #nav a:active, #nav a:visited { 
    background-color: #333333; 
    border: 1px solid #333333; 
    color: #FFFFFF; 
    display: block; 
    padding: 0 5px; 
    text-decoration: none; 
    visibility: visible; 
} 

#nav a:hover { 
    background: #ffffff; 
    color: #333333; 
} 

/* dropdown */ 
#nav li:hover > ul { 
display: block; 
} 

/* level 2 list */ 
#nav ul { 
    display: none; 
    left: 100px; 
    position: absolute; 
    width: 192px; 
    top: 0; 
} 

#nav ul li { 
float: none; 
margin: 0; 
padding: 0; 
} 

/* clearfix */ 
#nav:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#nav { 
    display: inline-block; 
} 

html[xmlns] #nav { 
display: block; 
} 

* html #nav { 
    height: 1%; 
} 
</style>

希望有所幫助！

來源

2012-02-05 19:42:29 plumwd

據我所見，你的代碼有一些問題。我明天再解釋一下。 – Christoph 2012-02-05 20:58:58

'*'破解是有效的，但只能由IE6解釋 - 因爲這個下拉菜單不會在IE6中工作，您可以省略它。 'html [xmlns]'用於xhtml - 因爲您使用html5文檔類型，所以它沒用。 clearfix通過'#nav：after'在IE 7中不起作用。 a選擇器中的'visibility'是不必要的。 – Christoph 2012-02-06 08:40:25

子菜單不工作在IE瀏覽器和Chrome ..在FF工作，Opera

回答

相關問題