Jump to content


Photo

3rd level of nav is not hiding.

css css3 html

  • Please log in to reply
1 reply to this topic

#1 stevengreen22

stevengreen22

    Advanced Member

  • Members
  • PipPipPip
  • 119 posts

Posted 30 July 2013 - 05:27 AM

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


#2 JustLikeIcarus

JustLikeIcarus

    Advanced Member

  • Members
  • PipPipPip
  • 430 posts
  • LocationKentucky

Posted 01 August 2013 - 03:47 AM

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/


I was contemplating the immortal words of Socrates who said "I ate what?"




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com