Question

I am writing a menu navigation using basic HTML ul/li lists, basic CSS code, and basic jQuery code. I have multiple levels of the menu, and the problem is that once the first level is displayed it automatically displays all the levels below it. Check out the Link to see if in action. The SheetMusic & Media menus are the ones in question.

I need help getting all of those submenu items not to display on default? Do any of you know how I could do that?

I hope one of you has an answer.

Morgan Kenyon

Here’s my relevant code working in a 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

In your hover function, you show all the ul and img-elements inside. Use the direct child selector to fix that:

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