ドロップダウンメニューを作成しています。これまで何度もやったことがあるので、今回はうまくいかない理由がわかりません。どんな助けでも大歓迎です。
すべてのバージョンの IE は、CSS ドロップダウン メニューでホバー イベントをトリガーすることを拒否します。これは chrome と FF で機能しますが、IE7、8、および 9 では、リンク テキストまたは に設定された境界線にカーソルを合わせたときにのみドロップダウン メニューが表示されますli(以下の参照を参照)。
時間を無駄にするつもりはありませんDOCTYPE。私のコードには があります。その他の HTML5 要素にも Modernizr を使用しています。これを無効にしようとしましたが、うまくいきません。すべてのリンクにはhref属性があり、どれも空ではありませli ul {}んposition absolute。
これが私の問題の完全な説明です。残念ながら、彼らの「修正」では修正されません: http://www.hopstudios.com/blog/internet_explorer_hover_li_bug_solution/
これが私のCSSです。これらはすべて、http: //allgodspeople.org/simplexdemo/でオンラインで公開されています。
nav {
width: 530px;
float: right;
clear: right;
height: 78px;
overflow: visible;
}
nav * {
zoom: 1;}
nav ul {
margin: 0px;
padding: 0px;
}
nav ul li {
display: block;
float: left;
clear: none;
height: 53px;
list-style-type: none;
padding: 30px 0px;
z-index: 999;
position: relative;
}
nav a:link, nav a:visited, nav a:hover, nav a:active {
display: block;
float: left;
clear: both;
color: #ffffff;
height: 23px; /*important for submenu positioning*/
text-decoration: none;
font-family: bebas;
padding: 0px 8px 0px;
margin: 0px;
}
nav ul li a {
height: 73px;
margin-top: -30px;}
nav li a:hover {
color: #e57914;
text-decoration: underline;
}
nav li.active a {
color: #e57914 !important;
}
/*Dropdown styles*/
nav li ul {
display: none;
float: left;
clear: both;
background: #444444;
border-radius: 0px 0px 4px 4px;
padding: 0px;
margin: 0px;
overflow: hidden;
position: absolute;
top: 73px;
z-index: 999;
width: 200px;}
nav li:hover ul , nav li.hover ul{
display: block;}/*trigger the dropdown*/
nav li ul li {
background-color: #444444;
display: block;
float: left;
clear: both;
height: auto;
min-height: 23px;
padding: 0px 0px;
overflow: hidden;}
nav li ul a:link,
nav li ul a:visited,
nav li ul a:hover,
nav li ul a:active {
display: block;
background-color: #444444;
color: #ffffff;
padding: 6px 15px;
margin: 0px;
width: 160px;
min-width: 160px;
margin: 0px;}
nav li ul a:hover {
background: #284f66;
color: #e57914;
text-decoration: none;}
nav li ul li:last-of-type a {
border-radius: 0px 0px 4px 4px;}
PS。私@charset "UTF-8"もそこにいます。
私はこれを何時間も調査しており、IE インスペクタで何時間も騙されていましたが、文書化された例はほとんど見つかりませんでしたが、どれも私の問題を解決するものはありませんでした。IE6 が li:hover を正しくサポートしていないことは知っています。私は IE6 は気にしませんが、IE7、8、さらには IE9 にこのバグがあるとは思いもしませんでした。
誰でもこれを修正する方法を知っていますか? 見栄えが良ければ、ハックでも？本当にありがとう！