I'm hacking away at a small website project, trying use HTML and CSS only for now, and am pretty happy with the desktop version but when testing on my iPhone I can expand the hamburger menu with a click but it will not collapse upon clicking it a second time or clicking outside the screen. It seems relatively easy to solve with jquery but I'm really curious now to see if I can do it without?

[![Desktop Nav](https://i.stack.imgur.com/hTFKe.png)](https://i.stack.imgur.com/hTFKe.png)

[![Mobiel Menu](https://i.stack.imgur.com/yyhJr.png)](https://i.stack.imgur.com/yyhJr.png)

HTML:

```
<!DOCTYPE html>
<html>
<head>
    <title>Website</title>
    <!--fonts-->
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
    <!--//fonts-->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- for-mobile-apps -->
    <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="Personal Website" />
    <!-- //for-mobile-apps -->
</head>
<body>
    <header>
        <a href="index.html" id="logo"></a>
        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>

```

CSS:

```
@media only screen and (max-width : 640px) {

    header {

        position: absolute;

    }

    #menu-icon {

        display:inline-block;

    }

    nav ul, nav:active ul { 

        display: none;
        position: absolute;
        padding: 20px;
        background: #fff;
        border: 5px solid #444;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 4px 0 4px 4px;

    }

    nav li {

        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;

    }

    nav:hover ul {

        display: block;

    }

```