3rd level of nav is not hiding.

[stevengreen22]

Hi,

 

I'm turning a 2 level nav into a 3 level and running into a few difficulties.

 

The 3rd level displays where and as predicted but when the 'grandparent' is hovered over, not the parent of the items I want displayed.

 

I've been fooling around with the css for a while and I cannot get it to respond how I'd like.  

 

Any help is appreciated.

 

There is a fiddle as my explanation might be somewhat lacking.

 

    http://jsfiddle.net/6TGaf/

 

Code from fiddle:

 

        #nav{

        background: #bada55;

        width: 99%;

        margin-top:-5px;

    }

    

    #nav ul{

        list-style: none;

        margin: 0;

        padding: 0;

        height: 40px;

    }

    

    #nav ul li{

        /*child elements positioned absolutley will be relative to this*/

        position: relative;

        border-top: 1px solid #e9e9e9;

        float: left;

    

    }

    

    #nav a{

        color: ghostwhite;

        padding: 12px 0px;

        /*fill hori space*/

        display: block;

        text-decoration: none;

    /*apply transition to background property, taking 1s to change it

    */

        transition:padding 1s, background 1s;

        -moz-transition:padding 1s, background 1s;

        -webkit-transition:padding 1s, background 1s;

        -o-transition:padding 1s, background 1s;

    

        font-family:tahoma;

    

        font-size:13px;

        text-transform:uppercase;

        padding-left:20px;

    }

    

    /*hover pseduo class*/

    #nav a:hover{

        /*

        RGBA background for transparancy:

        last number(0.05) is the transparency

        */

        padding-left:35px;

        background: RGBA(255,255,255,0.05);

        color:#fff;

    }

    

    #nav ul li:hover ul{

        /*diplay when hovered*/

        display: block;

    }

    

    #nav ul ul{

        position: absolute;

        left: 0px;

        top: 40px;

        border-top: 1px solid #e9e9e9;

        display: none;

        /*width: 304px;*/

        z-index: 1;

    }

    

    #nav ul ul li{

        width: 150px;

        background: #f1f1f1;

        border: 1px solid #e9e9e9;

        border-top: 0;

        /*float:left;*/

    

    }



    #nav ul ul li a{

        color:#000000;

        font-size:12px;

        text-transform:none;

    }

    

    #nav ul ul li a:hover {

        color:#929292;

    }



    /*3rd level...*/

    #nav ul ul ul{

        position: absolute;

        left: 150px;

        top: 0px;

        border-top: 1px solid #e9e9e9;

        display: none;

        /*width: 304px;*/

        z-index: 1;

    }

    

    #nav ul ul ul li{

        width: 150px;

        background: #f1f1f1;

        border: 1px solid #e9e9e9;

        border-top: 0;

    }



    #nav ul ul ul li a{

        color:#000000;

        font-size:12px;

        text-transform:none;

    }



    #nav ul ul ul li a:hover {

    color:#929292;

    }



    #nav ul ul li:hover ul{

    /*diplay when hovered*/

    display: block;

    }



    <nav id = "nav">

        <ul>

            <li>

                <a href="#">1.1</a>

                <ul>

                    <li>

                        <a href="#">1.1.1</a>

                        <ul>

                            <li><a href="#">1.1.1.a</a></li>

                            <li><a href="#">1.1.1.b</a></li>

                        </ul>

                    </li>



                    <li><a href="#">1.1.2</a></li>

                    <li><a href="#">1.1.3</a></li>

  

                </ul>

            </li>

    </ul>

</nav>

[JustLikeIcarus]

start by changing

#nav ul li:hover ul{
    /*diplay when hovered*/
    display: block;
}

to

#nav ul li:hover > ul{
    /*diplay when hovered*/
    display: block;
}

test that it should put you in the right direction. Here is a fiddle with the change http://jsfiddle.net/6TGaf/13/