jquery - HTML 菜单和子菜单显示

Question

我正在使用基本的 HTML ul/li 列表、基本的 CSS 代码和基本的 jQuery 代码编写菜单导航。我有多个级别的菜单，问题是一旦显示第一级，它会自动显示它下面的所有级别。查看Link看看是否在行动。 SheetMusic & Media 菜单是有问题的。

我需要帮助让所有这些子菜单项不默认显示吗？你们有人知道我该怎么做吗？

我希望你们中的一个人有一个答案。

摩根肯扬

这是我在 jsFiddle 中工作的相关代码.

HTML

<div id="container">
<ul id="dropdown">
    <li class="mainnav"><a href="#">About</a></li>
    <li class="mainnav"><a href="#">Sheet Music</a>
        <img class="droparrow" src="@ACCOUNTRESOURCES/DropdownTriangle75.png"/>
        <ul>
            <li><a href="#">Solos</a>
                <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
                <ul>
                    <li><a href="#">Solo 1</a></li>
                    <li><a href="#">Solo 2</a></li>
                </ul>
            </li>
            <li><a href="#">Exercises</a>
                <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
                <ul>
                    <li><a href="#">Snare Drum</a></li>
                    <li><a href="#">Tenors</a></li>
                    <li><a href="#">Bass Drum</a></li>
                    <li><a href="#">Various Corps.</a></li>
                    <li><a href="#">Drum Set</a></li>
                </ul>
            </li>
            <li><a href="#">Rudiments</a></li>
        </ul>
    </li>
    <li class="mainnav"><a href="#">Gallery</a></li>
    <li class="mainnav"><a href="#">Media</a>
        <img class="droparrow" src="@ACCOUNTRESOURCES/DropdownTriangle75.png">
        <ul>
            <li><a href="#">Video</a>
                <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
                <ul>
                    <li><a href="#">Solos</a>
                        <img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
                        <ul>
                            <li><a href="#">Snare</a></li>
                            <li><a href="#">Tenor</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Ensembles</a></li>
                    <li><a href="#">Rudiments</a></li>
                    <li><a href="#">Miscellaneous</a></li>
                </ul>
            </li>
            <li><a href="#">Audio</a></li>
        </ul>
    </li>
</ul>

CSS

    #dropdown  {
        margin:0px 0px 0px 34px; 
        padding:0; 
        list-style:none;
    }
    #dropdown  li {
        float:left;         /* Show list items inline */
        margin: 3px 3px 1px 3px;
        /*padding: 7px 5px 14px 5px;*/
        position:relative; 
        font-size:100%;
    }
    #dropdown  li a {
        display:block;      /* Making sure a element covers whole li area */
        text-decoration:none; /* No underline */
        color:#FFFFFF;
        font-family: Calibri;
        font-size: 16px;
        font-weight: bold;
        padding:1px 7px 1px 7px;
        margin: 26px 0px 0px 7px;
    }
    #dropdown  li a:hover {
        background:rgba(255,255,255,.75);
        color:#000000;
        cursor:pointer;
        text-decoration:none;
        /*margin: 0px 0px 7px 7px;*/
        border-radius:2px;
        -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    }
    /*Second Level */
    #dropdown  ul {
        position:absolute; 
        left:0; 
        display:none;
        margin:-3px 0px 0px 7px; 
        padding:0px 0px 0px 0px; 
        list-style:none;
        background: rgba(255, 255, 255, 0.75);
        border-radius:3px;
        z-index:4;
    }
    #dropdown ul:hover {
        position:absolute; 
        left:0; 
        margin:-3px 0px 0px 7px; 
        padding:0px 0px 0px 0px; 
        list-style:none;
    }
    #dropdown  ul li {
        float:left;
        width:108px;
        height:20px;    
        padding: 0px 0px 0px 0px;
        border-top:none;
    }
    #dropdown  ul li a {
        display:block;      /* Making sure a element covers whole li area */
        width:100px;
        padding: 2px 10px 2px 5px;
        margin: 0px 0px 0px 0px;
        color:#000000;
        text-decoration:none;   
    }

    #dropdown  ul li a:hover {
        padding: 2px 0px 2px 5px;
        margin: 0px 0px 0px 0px;
        color: rgba(255,255,255,1);
        background: rgba(0,0,0,.75);
    }
    /*Third Level    */
    #dropdown ul ul {
        position:absolute;
        display:none;
        left:0;
        padding:0px 0px 0px 0px;
        margin:-22px 0px 0px 118px;
    }
    #dropdown ul ul:hover {
        padding:0px 0px 0px 0px;
        margin:-22px 0px 0px 118px;
    }
    .droparrow {
        margin: 10px 0px 0px 30px;
        display:none;
    }
    .dropRarrow {
        position:absolute;  
        display:none;
        margin: -23px 0px 0px 111px;
    }

jQuery

$(document).ready(function () {    
        $('#dropdown li').hover(
            function () {
                $('ul, img', this).show();
            }, 
            function () {
                $('ul, img', this).hide();
            }
        );
    });​

Answer 1

在你的悬停函数中，你显示了里面所有的 ul 和 img 元素。使用直接子选择器来解决这个问题:

$(' > ul, > img', this).show();