IEとChromeでサブメニューが動作しないFF、Operaでの作業

以下はHTMLで書かれたコードですが、私はFF、Operaで完全に欲しいものを得ています。私の友達もIEで動くことができますが、私はそうではありません...また、私は出力クロムを見ることができません。何らかの理由？？事前に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

もう何か試しましたか？まだ答えが無ければ、明日あなたに解決策を投稿します。スマートフォンでたくさんのテキストを書く;） – Christoph

私は私の答えを解決策を追加しました。それを試してみてください。 – Christoph

ありがとうChristoph –

あなたはCSSで重複したスタイルの多くを持っています。それらを排除しようとする。特に、ulには互いに優越する多くのルールがあります。あなたのulのさまざまなレベルのクラスを使用して、より具体的なルールを作成してください。

EDIT：あなたが必要

すべての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'のサブメニューが表示されなかったことです。 –

すべての助けを借りてありがとう:) –

問題の一部は、HTMLにdoctypeを宣言していないことです。宣言されたdoctypeは、IEをquirksmodeに置き換えます。そしてそれはあなたが期待しているものとは異なった振る舞いをします。

<!DOCTYPE html>は、ドキュメントの上部に配置します。 Quirksmode Explanation

さらに、あなたよりも少し良く機能する多くの堅牢なソリューションがあると思います。前述のように、重複したスタイルが宣言されていることが多く、問題が発生する可能性があります。

本当にうまくいく以下の解決策を使って、素早くGoogle検索を試してください。 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

'*' hackは有効ですが、IE6だけで解釈されます - このドロップダウンメニューはIE6で動作しませんので、省略することができます。 'html [xmlns]'はxhtmlのためのものです - あなたはhtml5 doctypeを使います。「#nav：after」によるclearfixはIE 7では機能しません。 a-selectorの 'visibility'は不要です。 – Christoph

IEとChromeでサブメニューが動作しないFF、Operaでの作業

答えて

関連する問題