Responsive navigation dropdown mobile

using css only

HTML

<div id="nav-holder">



<ul class="nav">
    <li><a class="btn">&#9776;</a>
        <ul class="menu">
            <li><a href="/">Home</a></li>
            <li><a href="/portfolio">Portfolio</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </li>
</ul>



</div>

CSS

body {
    margin: 0;
    font-family: sans-serif;
    font-size: 1.1em;
    line-height: 1em;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;;
    background-color: #666;
}

ul .btn {
    display: none;
    cursor: pointer;
}

ul li {
    float: left;
}

ul li a {
    display: block;
    padding: 15px 0 15px 20px;
    text-decoration: none;
    color: #bbb;
}

ul li a:hover {
    color: #fff;
}

@media (max-width: 30em) {
    ul li {
        float: none;
    }
    ul .btn {
        display: block;
    }
    ul .menu li a {
        padding: 0px 20px 10px 20px;
    }
    ul .menu {
        display: none;
    }
    ul li:hover .menu {
        display: block;
    }
}