Max-height 0, text still displayed

Question

So I set max-height of ul element to 0, but text content is still displayed.

 <ul>
    <li>Bendeykt</li>
    <li>Analfabata</li>
</ul>

Here's the link:

http://jsfiddle.net/wh9ntf2z/1/.

Later I would like to use transition effects in order to hide and show navigation bar, when user will click on menu icon. But I don't know how to make the list element disappear.

Answer 1

Try overflow:hidden

$(".button").click(function(){
    $('ul').toggleClass('shown');
});

li{
    list-style-type:none;
    display:inline-block;
    padding:20px;
}

ul{
    background-color:green;
    max-height:0;
    overflow:hidden;
    transition:max-height 1s ;
}

.shown{
     max-height:100em; 
}

.button{
    cursor:pointer;
    color:grey;
    height:20px;
    width:50px;
    background-color:yellow;
    
    

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="button">Click</div>

    <ul>
        <li>Bendeykt</li>
        <li>Analfabata</li>
    </ul>