Media Query menu bar

Menu bar goes folded on narrow screen, Using media Query.

by stackmanoz

HTML

<ul class="list">
    <li>Home</li>
    <li>Home</li>
    <li>Home</li>
</ul>
<div class="menu">
    <div class="toggle-button">|||||||</div>
</div>

CSS

ul
{
    list-style:none;
    background:black;
    padding:10px;
    
}
.menu
{
    width:100%;
    height:20px;
    background:#111;
    padding:10px;
    display:none;
}
.toggle-button
{
    float:left;
    color:white;
    height:20px;
    
    width:20px;
    display:inline;
}
body
{
    background:#999;
}
ul li
{
    color:white;
    display:inline;
    padding:10px;
    
}
@media only screen and (max-width:400px)
        {
    .list{display:none;}
    .menu{display:block;}
    
}