Question

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

我需要帮助让所有这些子菜单项在默认情况下不显示？你们中的任何人都知道我该怎么办吗？

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

Morgan Kenyon

以下是我在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();

HTML菜单＆amp;子菜单显示

1 个答案: