0

ドロップ垂直ドロップダウンメニューのコードを投稿しました。あるナビゲーション ボタンから次のナビゲーション ボタンにマウスを移動するときを除いて、すべてがうまく機能します。メニューを下に移動し、マウスをボタンの上に置くと、ドロップダウン メニューが表示されます。このメニューをうまく下に移動できます。私の問題は、次のメインボタンに移動したときに発生します。古いメニューがポップバックしてから、新しいメニューがポップアップし、マウスは新しいドロップダウン メニューの真ん中にあります。ユーザーが再び移動するまで、ドロップダウンメニューのメインボタンをそのままにしておきたい。これが私のコードです。コピーして貼り付けることができ、問題なく動作して、私が話していることの例を示します

ありがとう

<!DOCTYPE html>

<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8">

<style type="text/css">
    body
    {
        background: grey;
    }
    .menu 
    {
        width: 120%;
        display: block;
        float: right;
    }

    .menu ul
    {
        list-style: none;
    }

    .menu a
    {
        color: #000000;
        display: block;
        cursor: pointer;
        background: #808080;
        border: 1px solid #000000;
        padding: 6px 2px 6px 2px;
        font-size: small;
        text-align: center;
        text-decoration:none;
        font-weight: bold;
        width: 80%;
        margin: auto; 

        -webkit-border-radius: 4px 4px 4px 4px;
        -moz-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;

        -webkit-box-shadow: inset -2px -2px 2px 2px #181818;
        -moz-box-shadow: inset -2px -2px 2px 2px #181818;
        box-shadow: inset -2px -2px 2px 2px #181818;
    }

    .menu a:hover
    {
        color: #ffffff;
    }

    .menu a:active
    {
        -webkit-box-shadow: inset 1px 1px 1px 1px #181818;
        -moz-box-shadow: inset 1px 1px 1px 1px #181818;
        box-shadow: inset 1px 1px 1px 1px #181818;
    }

    .subMenu a
    {
        color: #ffffff;
        cursor: pointer;
        background: none;
        border: none;
        font-size: .80em;
        text-align: left;

        text-decoration:none;
        font-weight: normal;
        width: 100%;
        margin-left: -20px;

        border-radius: 0px 0px 0px 0px;
        box-shadow: 0px 0px 0px 0px;

        /*
        border-bottom: 1px solid #000000;
        border-left: 1px solid #000000;
        */

    }

    .subMenu a:hover
    {
        color: #ffffff;
        background: #000000;
        font-size: .90em;
    }

    .menu ul ul li
    {
        display:none;
    }


    .menu li:hover ul li
    {
        display:block;
    }
</style>

 </head>

<body>
<div style="width: 300px">
    <div class="menu">
        <ul>
             <li><a href="index.htm" style="color: #ffffff">Home</a>
                 <div class="subMenu">
                     <ul>
                         <li><a href=index.htm#zombie>What is a Zombie</a></li>
                         <li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li>
                     </ul>
                     <br>
                 </div>
             </li>

             <li><a href="surviveFirstNight.htm">Surviving First Night</a>
                 <div class="subMenu">
                     <ul>
                         <li><a href=surviveFirstNight.htm#firstNight>What is First Night</a></li>
                         <li><a href=surviveFirstNight.htm#prepared>Prepare/Planning</a></li>
                         <li><a href=surviveFirstNight.htm#survivalKit>Zombie Survival Kit</a></li>
                         <li><a href=surviveFirstNight.htm#group>Form a Group</a></li>
                     </ul>
                     <br>
                 </div>
             </li>
             <li><a href="extendedSurvival.htm">Extended Survival</a>
                 <div class="subMenu">
                     <ul>
                         <li><a href=index.htm#zombie>What is a Zombie</a></li>
                         <li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li>
                     </ul>
                     <br>
                 </div>
             </li>

             <li><a href="weapons.htm">Weapons</a>
                 <div class="subMenu">
                     <ul>
                         <li><a href=weapons.htm#meele>Meele Weapons</a></li>
                         <li><a href=weapons.htm#firearms>Firearms</a></li>
                         <li><a href=weapons.htm#projectile>Projectile Weapons</a></li>
                         <!--<li><a href=weapons.htm#explosives>Explosives</a></li> -->
                     </ul>
                     <br>
                 </div>
             </li>
             <li><a href="humanElement.htm">Human Element</a>
                 <div class="subMenu">
                     <ul>
                         <li><a href=index.htm#zombie>What is a Zombie</a></li>
                         <li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li>
                     </ul>
                     <br>
                 </div>
             </li>
             <li><a href="refMaterial.htm">Reference Material</a>
                 <div class="subMenu">
                     <ul>
                         <li><a href=index.htm#zombie>What is a Zombie</a></li>
                         <li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li>
                     </ul>
                     <br>
                 </div>
             </li>
        </ul>    
    </div>  
</div>
</body>
</html>
4

2 に答える 2

0

多分あなたはこのようなものが欲しい: http://jsfiddle.net/duweP/1/

jQuery(document).ready(function ($) {
    $('.menu > ul > li').on('mouseenter', function () {
        $("div.subMenu").slideUp();
        $(this).find("div.subMenu").slideDown();
    });
});

クリックで表示することをお勧め.subMenuします。このように: http://jsfiddle.net/duweP/2/

于 2013-04-14T16:32:06.690 に答える