純粋な CSS ドロップダウン メニューを作成しようとしています。後で画像を使用しますが、今のところ、色のプレース ホルダーがあります。Chrome と Firefox で完全に動作します。ただし、IE(10) と Safari では、ドロップダウンが表示されません。
IE でトラブルシューティングを試みたところ、CSS の一部が、メニューを構築したネストされたリストに関連して表示されないことがわかりました。たとえば、次の CSS 属性はないようです。
ul#menu li > ul li:hover span
「ホバー」を削除しても。これまでのところ、私の修正はどれもうまくいきませんでした.完全なオーバーホールを避けようとしています (私はそれを検討しましたが).
私がテストしているサイトはここにあります: www.nimbleforce.com/public/test
正常に動作している場合 (Chrome と FF のように)、ホバーするとメイン メニュー項目がグレーに変わります。1 番目と 4 番目のメニュー項目にはドロップダウンがあり、ホバーすると赤に変わります。IE では、グレーのホバーは正常に発生していますが、ドロップダウン メニューの兆候はまったくありません。Safariでも同じですが、ホバーするとメインメニューの下にポインターが表示されますが、ドロップダウンがそこにあるが見えないかのようです。
私は自分のコードを検証しましたが、IE の不透明度ハックを除いて、すべて問題ありません。（私はそれらを削除して、それが修正されたかどうかを確認しようとしましたが、修正されませんでした。）
関連する HTML は次のとおりです。
<div id="navBox">
<ul id="menu">
<li id="bookshelf"><a href="#"><span></span></a>
<ul id="sub1">
<li id="author"><a href="#"><span></span></a></li><!--by author-->
<li id="series"><a href="#"><span></span></a></li><!--by series-->
<li id="genre"><a href="#"><span></span></a></li><!--by genre-->
<li id="line"><a href="#"><span></span></a></li><!--by line-->
</ul>
</li>
<li id="comingsoon"><a href="#"><span></span></a></li>
<li id="blog"><a href="#"><span></span></a></li>
<li id="submissions"><a href="#"><span></span></a>
<ul id="sub2">
<li id="special"><a href="#"><span></span></a></li><!--special lines-->
<li id="calls"><a href="#"><span></span></a></li><!--specific calls-->
</ul>
</li>
<li id="faq"><a href="#"><span></span></a></li>
</ul>
</div>
そして、これは私のナビゲーションCSSです:
#navBox {
margin: 44px auto 0 51px;
height: 47px;
width: 1028px;
}
#bookshelf, #comingsoon, #blog, #submissions, #faq {
height: 47px;
position: absolute;
}
#menu, #sub1, #sub1 li {
position: relative;
}
#bookshelf, #bookshelf span {
background-color: yellow;
width: 184px;
}
#bookshelf {
margin-left: 49px;
}
#comingsoon, #comingsoon span {
background-color: green;
margin-left: 0;
width: 212px;
}
#blog, #blog span {
background-color: blue;
margin-left: 0;
width: 122px;
}
#submissions, #submissions span {
background-color: purple;
margin-left: 28px;
width: 207px;
}
#faq, #faq span {
background-color: red;
margin-left: 25px;
width: 149px;
}
#submissions span, #faq span {
margin-left: 0;
}
#bookshelf, #comingsoon, #blog, #submissions, #faq, #bookshelf a span, #comingsoon a span, #blog a span, #submissions a span, #faq a span {
cursor: pointer;
display: block;
float: left;
}
#bookshelf a span, #comingsoon a span, #blog a span, #submissions a span, #faq a span {
height: 100%;
opacity: 0;
filter:alpha(opacity=0); /* For IE8 and earlier */
transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
#bookshelf a span {
background-color: gray;
}
#comingsoon a span {
background-color: gray;
}
#blog a span {
background-color: gray;
}
#submissions a span {
background-color: gray;
}
#faq a span {
background-color: gray;
}
#bookshelf a:hover span, #comingsoon a:hover span, #blog a:hover span, #submissions a:hover span, #faq a:hover span {
opacity: 1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
ul#menu li
{
position:relative;
list-style-type:none;
padding:0px;
}
#sub2 li {
margin-left: 0;
}
ul#menu li > ul span {
left:0;
display: none;
background-color: blue;
opacity: 1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
-webkit-transition: background-color 1s ease;
}
ul#menu li > ul li:hover span {
background-color: red;
}
ul#menu li > ul span#sub1 {
width: 184px;
}
ul#menu li > ul span#sub2 {
width: 207px;
}
ul#menu li:hover > ul span
{
display: block;
}
ここに来るのは初めてなので、もし私がこれを間違えた場合は、私の愚かさを我慢して、私に知らせてください. 私はすぐにそれを修正しようとします。あなたが私に与えることができるどんな助けにも感謝します.