CODEWITHSUNDEEP
javascriptjqueryhtmlcss
hannebaumsaway
hannebaumsaway

Reputation: 2734

List items not sliding for new items

I have a nested unordered list that I want to expand accordion-like for new sub-items when a parent is clicked.

The functionality is working fine, but the parent list isn't sliding down to accomodate the newly visible sub-list (so the sub-list just slides on top of the unmoving parent list). I tried this on a fiddle and strangely it worked fine there. I'm guessing it has something to do with the CSS I'm using to format the list?

The code....

HTML:

<ul>
    <li>
        news
        <ul>
            <li>2013</li>
            <li>2012</li>
            <li>2011</li>
        </ul>
    </li>
    <li>scores</li>
    <li>standings</li>
    <li>the ddl</li>
    <li>records</li>
    <li>teams</li>
</ul>

Javascript:

$(document).ready(function() {  
    $('#nav-bar ul li').on('click', function() {
        $(this).children().slideDown('fast');
        $(this).siblings().children().slideUp('fast');
    });
});

CSS:

#nav-bar {  /*left bar*/
    float: left;
    width: 110px;
    text-align: center;
    height: inherit;
}

#nav-bar ul {   /*main menu*/
    list-style-type: none;
    text-align: left;
    padding: 0px;
}

#nav-bar ul li {    /*main menu item*/
    height: 75px;
    background-color: #666;
    color: #ccc;
    border-bottom: 3px solid #333;
}

#nav-bar ul li ul { /*sub-menu*/
    display: none;
}

#nav-bar ul li ul li {  /*sub-menu item*/
    height: 35px;
    background-color: #aaa;
    color: #666;
    border-bottom: 1px solid #333;
}

Upvotes: 0

Views: 102

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106038

you fixed an height where it should be , IMHO, a min-height: http://jsfiddle.net/7VPG6/36/ 

#nav-bar > ul>  li {    /*main menu item*/
    min-height: 75px;
    background-color: #666;
    color: #ccc;
    border-bottom: 3px solid #333;
}

take a look at : http://www.w3.org/TR/css3-selectors/

Upvotes: 1

Related Questions