私がこの問題を抱えているのは私が最初ではないと確信していますが、過去30分間検索した後、私が抱えている問題を抱えている人を見つけることができませんでした。
http://stagecentral.org/example/
IE7以外で表示する場合は、マウスをテキストから最初のオプションに移動すると正常に機能します。ただし、IE7でテストする場合、カーソルをテキストにすばやく移動できますが、いくつかの不具合があります。
- 元のメニューテキストとオプションの間のスペースが登録されていないようで、タイマーがメニューのドロップを開始します。
- 一番上のメニュー項目は、テキストに到達するまでホバリングを登録しません(一番上のパディングは無視されます)。
このセクションに関連するHTMLは次のとおりです。
<div class="megamenu_container">
<ul id="menu">
<li>
<a href="#">Upcoming Events</a>
<div class="dropcontainer">
<div class="submenu-cap-left"></div>
<div class="submenu-cap-right"></div>
<div class="clear"></div>
<div class="submenu-left">
<ul class="submenu">
<li class="first"><a href="#">Upcoming Performances</a></li>
<li><a href="#">Upcoming Auditions</a></li>
<li><a href="#">Upcoming Staged Readings</a></li>
<li><a href="#">Upcoming Workshops</a></li>
<li><a href="#">Calendar of Events</a></li>
<li class="last"><a href="#">Directions to Venues</a></li>
</ul>
<div class="submenu-foot-left"></div>
<div class="submenu-foot-right"></div>
</div>
<div class="submenu-right" style="height:251px;"></div>
</div>
</li>
</ul>
</div>
メインのCSSは、次のスタイルシートにあります。http: //stagecentral.org/example/css/main.css
そして最後に、MegamenuのJavascriptはここにあります:http ://stagecentral.org/example/js/megamenu.js