-1

オンラインで見つけたホバードロップダウンナビゲーションバーのコードがあります。メインテキストの上にマウスを置くと、サブメニューがドロップダウンするはずです。

Chrome と FF では完璧ですが、IE(8) では ul コードが右に押し出され、カーソルを移動できなくなります。

ありがとう。

CSS:

#dropmenu,
#dropmenu ul {
list-style: none;
}
#dropmenu {
float: left;
width: auto;
}

#dropmenu li {
width: auto;
}

#dropmenu > li {
float: left;
width: auto;    
}
#dropmenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#dropmenu ul {
position: absolute;
display: none;
z-index: 999;
}
#dropmenu ul li a {
width: 80px;
}
#dropmenu li:hover ul {
display: block;
}

HTML:

<ul id="dropmenu">
<li><a href="#">Our Company</a>
<ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>
<li><a href="#">Our Solutions</a>
<ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>
<li><a href="#">Service Desk</a>
    <ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>
    <li><a href="#">resources</a>
    <ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>
<li><a href="#">Contact</a>
<ul>
        <li><a href="#">Hellenico</a></li>
        <li><a href="#">Genere</a></li>
        <li><a href="#">Indulgentia</a></li>
    </ul>
    </li>

4

1 に答える 1

1

</ul>リストの末尾に がありませんid="dropmenu"。これは問題になる可能性があります。Chrome と Firefox は壊れたコードを完成させるのに優れていますが、IE は壊れる傾向があります。

メニュー全体をラップする を終了しません。HTMLの最後に追加する必要があります

</ul>
于 2013-07-12T16:01:53.250 に答える