2

最初のメニュー項目には、li：hoverに表示されることになっているドロップダウンサブメニューがあります。ただし、何らかの理由で、いずれかのliの間の余白にカーソルを合わせると、サブメニューが表示され、その理由がわかりません。ChromeとIEの互換モードで動作しますが、IE8では動作しません。

サブメニューを表示するCSSの行は次のとおりです。

.menu li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    }

私にとって、これは、liにカーソルを合わせるたびに、その子ulのいずれかを次のスタイルでスタイル設定することを意味します。ネストされたulを持たないli間のマージンでこれがトリガーされるのはなぜですか？

念のため、メニューのCSS全体を次に示します。

.menu {
font-weight: normal;
font-size: 1.1em;
margin-top: 5px;
padding: 5px 0 0 0;
font-family: OswaldLight;
display: table;
margin: 0 auto;
}

.menu li {
list-style: none;
float: left; 
margin-right: 10px;
}

.menu li a {
display: block;
text-decoration: none; 
padding:5px;
color:@navbar-text;
background:@navbar;
text-decoration:none;
}

.menu li ul {
display: none; 
background-color: @navbar;

}

.menu li ul li {
margin: 0;
}

.menu li a:hover {
color: @navbar-text-highlight;
background-color: @navbar-highlight; 
}

.menu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; 
}

.menu li:hover li {
float: none; 
}

.menu li:hover li a {
background-color: @navbar;
color: @navbar-text;
}

.menu li li a:hover {
color: @navbar-text-highlight;
background-color: @navbar-highlight; 
}
4

2 に答える 2

1

疑問に思っている人にとっては、問題は.menuクラスの「display：table」でした。.menuクラスは親ULに割り当てられ、IE8はそれをどう処理するかを知りませんでした。その行を削除し、親の周りに親を追加して、代わりにその「display：table」を指定すると、問題が解決したようです。「display：table」を使用している理由は、フロートをクリアするためですが、「margin：0 auto」を使用して、含まれているフロートを簡単に中央に配置できるようにするためです。これは、フロートのコンテナを中央に配置するための最も優れたソリューションのようです。 。

于 2012-06-29T14:57:17.650 に答える
0

これはおそらくサブメニューの幅と関係があります。さらに詳しく調べる必要がありますが、IEの幅の問題である可能性があります。

更新：まあ、あなたはそれを修正したようです

于 2012-06-29T14:42:30.143 に答える