2012-01-02 50 views
0

ブログのドロップダウンメニューを実装しましたが、IE(任意のバージョン)では正しく動作しません。 ChromeとMozillaではうまく機能しています。CSSドロップダウンメニューはMozilla、Chromeでは動作していますが、IEでは動作しません

IEと互換性を持たせるにはどうすればよいですか?

私が追加CSSは以下の通りです:事前に

#mbtnavbar { 
/*  background: #B0E2FF;*/ 
    width: 780 px; 
    color: #FFF; 
     margin: 0 px; 
     padding: 0; 
     position: relative; 
     border-top:5 px solid #960100; 
     height:30 px; 

} 

#mbtnav { 
    margin: 0; 
    padding: 0; 
} 
#mbtnav ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#mbtnav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
     border-left:0 px solid #333; 
     border-right:0 px solid #333; 
     height:35px; 
} 
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
    color: ; 
    display: block; 
    font:normal 13px Trebuchet MS, sans-serif; 
    margin: 5; 
    padding: 9px 12px 10px 12px; 
     text-decoration: none; 


} 
#mbtnav li a:hover, #mbtnav li a:active { 
    background: #0066FF; 
    color: #FFF; 
    display: block; 
    text-decoration: none; 
     margin: 0; 
    padding: 9px 12px 10px 12px; 



} 

#mbtnav li { 
    float: left; 
    padding: 0; 
} 
#mbtnav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    /*Width of drop down menu*/ 
    width: 180px; 
    margin: -2px; 
    padding: 0; 
} 
#mbtnav li ul a { 
    width: 140px; 
} 
#mbtnav li ul ul { 
    margin: -25px 0 0 161px; 
} 
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { 
    left: -999em; 
} 
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { 
    left: auto; 
} 
#mbtnav li:hover, #mbtnav li.sfhover { 
    position: static; 
} 

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { 
    background: #B0E2FF; 
    width: 360px; 
    color: ; 
    display: block; 
    font:normal 13px Trebuchet MS, sans-serif; 
    margin: 0; 
    padding: 9px 12px 10px 12px; 
     text-decoration: none; 
z-index:9999; 
border-bottom:1px dotted #333; 


} 
#mbtnav li li a:hover, #mbtnavli li a:active { 
    background: #0066FF; 
    color: #FFF; 
    display: block; 
    margin: 0; 
    padding: 9px 12px 10px 12px; 
     text-decoration: none; 
} 

おかげ

アナンド

+3

関連するコード(JSFiddleの例など)をここに追加してください。外部リンクだけでは、問題が解決されると、将来の読者には問題はありません。ありがとう! –

+0

それはあなたが正しくやっていないことを意味します。私はこの効果を少なくとも5つの異なる方法で行い、それらはすべてのブラウザですべて最初に動作します。彼らの誰も左のような虚偽の習慣に頼っている人はいない:-999em; –

+0

@Kolink:これを修正する方法を教えてください。 – Anand

答えて

2

まず、あなたのエラーを修正。サイトには307の検証エラーがあります。無効なマークアップは、ページが1つのブラウザから別のブラウザに正しくレンダリングされない理由の1つです。多くの人(自分自身を含む)は、あなたが有効なマークアップを得るまであなたのCSSを見ていません。

関連する問題