Question

我已经发布了垂直下拉菜单的代码。除了当我从一个导航按钮鼠标移动到下一个导航按钮时，一切都很好。当您向下移动菜单并且鼠标悬停在按钮上时，会出现一个下拉菜单。您可以通过此菜单向下移动。当我转到下一个主按钮时出现问题。弹出旧菜单，然后弹出新菜单，鼠标位于新下拉菜单的中间。我想让它保持下拉菜单的主按钮，直到用户再次移动它。这是我的代码，它可以被复制和粘贴，并且可以很好地举例说明我在说什么

由于

<!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>

Answer 1

我认为这里真正的问题是子菜单突然出现的方式并推送其他菜单项。从可用性的角度来看，不建议您使用您的方法。我建议在悬停时将子菜单向右移动。见小提琴：

http://jsfiddle.net/David_Knowles/yUyhG/1/

以下是主要变化：

     .menu ul li
    {
        position:relative;
    }

    .menu ul ul
    {
        display:none;
        padding:10px;
        background-color:#919191;
        -webkit-border-radius: 4px 4px 4px 4px;
        -moz-border-radius: 4px 4px 4px 4px;
        border-radius: 4px 4px 4px 4px;
    }

     .menu li:hover ul
    {
        display:block;
        position:absolute;
        top:0;
        left:100%;
        width:180px;
    }

希望这有帮助。

Answer 2

也许你想要这样的东西：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/

需要光标停留在下拉菜单的主要元素上

2 个答案: