0


1

IE 6および7の純粋なCSSドロップダウンメニューの問題

私はドロップダウン付きの純粋なCSSメニューを持っています。IE8とFFではうまく動作しますが、IE7とIE6の互換モードは動作しません。

それはドロップダウンします-しかし、マウスが下のメインのウェブサイトバナー上に移動すると、そこに巨大な画像があり、ドロップメニューが消えます…​

ここにリンクをドロップしたくないので、おそらく私のプロフィールからサイトを見つけることができます。

しかし、ここにいくつかのコードがあります。 最初にメニュー。

Home
Company

About us
Going Green
Privacy policy

Terms and conditions


Products

Domain Registrations
PHP Web Hosting Packages
Email Hosting Packages



Contact us

Support
Pre-sales Questions



Client Area

Register
Login
Client Area
Knowledgebase

Help Ticket System

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;
}

任意の助けをいただければ幸いです。 前もって感謝します。

4 Answer


3


純粋なCSSメニューには、多くの問題があります。特にhttps://ux.stackexchange.com/questions/343/common-web-app-usability-gotchas/415#415[diagonal problem]です。 Javascriptに切り替えることをお勧めします。これにより、ブラウザーの互換性の問題が解決し、メニューがより使いやすくなります。

jQueryを使用している場合、http://users.tpg.com.au/j_birch/plugins/superfish/ [Superfish]をお勧めします。


2


私の知る限り、IE6でメニューを使用するにはJavaScriptを使用する必要があります。 あなたが見たいと思うかもしれないインスタントシフトに関する記事を書きました:


2


IE6でメニューを機能させるためのオプションがいくつかあります。 IE8で互換モードを使用してテストしているように聞こえますが、これは実際にIE6を使用してサイトを見るのとはまったく異なります。

純粋なCSSドロップダウンをIE6で機能させる限り、単純な答えは次のとおりです。IE6は `` .hover`以外の擬似クラスを認識しないため、できません。

IE7.jsは、CSSのバグを修正し、サポートされていない機能をIEの古いバージョンに追加する素晴らしいJSライブラリです。一見の価値があります。

また、pushuptheweb.comで見つけることができるPushupを実装することで、ユーザーにアップグレードを促すこともできます(申し訳ありませんが、1つのリンクしか投稿できません)。

正直に言うと、あなたは本当に他のポスターが提案したようにして、マークアップからテーブルを取り除く必要があります。 これは非常に時代遅れのレイアウト手法であり、非常に少量のセマンティックHTMLおよびCSSに置き換えることができます。


0


まず、IE6は死んでいます。http://ie6funeral.com/ [IE6 Funeral]

次に、IE7の場合、z-indexを ul`に入れ、画像を div`でラップしてz-indexを配置する必要がある場合があります。 ul`のz-indexは、画像でラップする div`のz-indexよりも高くなければなりません。