2

シンプルな CSS と Javascript のドロップダウン メニューを作成するために、このコードを作成しました。

HTML:

<li><a href="#" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">XYZ</a>
    <ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
        <li><a href="#" style="position: absolute; top: 12px;">AAA</a></li>
        <li><a href="#" style="position: absolute; top: 50px;">BBB</a></li>
        <li><a href="#" style="position: absolute; top: 88px;">CCC</a></li>
    </ul>
</li>

CSS:

#rankSubMenu {
     display: none; 
     position: absolute; 
     bottom: 10px;
     left: 278px;
}

JS:

function showRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'block';
}

function hideRanksSubmenu() {
    document.getElementById('rankSubMenu').style.display = 'none';
}

もちろん、メニュー項目には、ボタンのように見せるための高さ、背景、その他のものがあります。問題は、このボタンの間に (数ピクセルのような) 空きスペースがあり、ユーザーがそこにマウス カーソルを止めると、メニューが消えることです (実際、カーソルを非常に速く動かさない限り、メニューは常にそうなります)。この領域全体を div として定義しようとしたり、考えた他のアイデアを試したりしましたが、成功しませんでした。どうすればこれを解決できますか？

4

6 に答える 6

2

CSS

    

    ドロップダウンリ{
    フロート:左;
    幅: 240px;
    位置:相対;
    }

    .dropdown ol{
    位置:絶対;
    左:-9999px; /* 必要のないときは画面外に隠す (これはよりアクセスしやすい
    表示:なし;) */
    }

    .dropdown li:hover ol{ /* ホバー時にドロップダウンを表示 */
    左：0; /* 必要に応じて画面に戻す */
    }

HTML

    <ul class="dropdown">
    <リ>
    <a href="#" >あなたのリンク</a>
    <オール>
    <li><a href="#"> あなたのリンク 1 </a> </li>
    <li><a href="#"> あなたのリンク 2 </a> </li>
    </ol>
    </li></ul>

これには他に何が必要ですか？これを作成するために JavaScript を使用する理由はありますか?

于 2014-01-30T22:15:03.293 に答える
0

私の推測では、アンカー タグを表示ブロックに設定します。アンカー タグがブロックでない場合、幅と高さの 2 つの主要な CSS プロパティが無視されるため、クリックは単なるテキストになります。

別の考えられる理由は、入ってくるサブメニューがリンクを部分的に覆っていることです (インスペクタをチェックして、それが覆っている領域を確認してください)。

于 2013-09-06T21:57:46.400 に答える
0

#rankSubMenuおそらく0pxの高さです。高さを追加してみてください。また、このjsを使用して無料で実行できます:hover

于 2013-09-06T21:52:58.267 に答える