#menu {
    clear: both;
    margin-bottom: 10px;
}
    #menu > a
    {
        display: none;
    }
    #menu li
    {
        position: relative;
    }

    /* first level */
    #menu > ul
    {
        list-style-type:none;  
        height: 3.75em;
        margin:0;
        padding:0;
    }
        #menu > ul > li
        {
            width: 16%;
            float: left;
        }

    /* second level */
    #menu li ul
    {
        list-style-type: none;  
        display: none;
        position: absolute;
    }
        #menu li:hover ul
        {
            display: block;
        }


        #menu
    {
        position: relative;
    }
        #menu > a
        {
        }
        #menu:not( :target ) > a:first-of-type,
        #menu:target > a:last-of-type
        {
            display: block;
        }


/*Style for menu links*/
            #menu li a {
                display: block;
                font-weight: bold;
                min-width: 220px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                text-decoration: none;
                border-radius: 5px;
                border: 1px solid #73AD21;
                background: #b8b894;
            }

/*Hover state for top level links*/
#menu li:hover a {
    background: #19c589;
}

/*Style for dropdown links*/
#menu li:hover ul a {
    background: #f3a858;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}

/*Hover state for dropdown links*/
#menu li:hover ul a:hover {
    background: #19ff99;
    color: #fff;
}

.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19ff99;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menutoshow{
    display: block;
}

@media screen and (max-width: 30em) {
    #menu
    {
        position: relative;
    }
        #menu > a
        {
        }
        #menu:not( :target ) > a:first-of-type,
        #menu:target > a:last-of-type
        {
            display: block;
        }

    /* first level */

    #menu > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
        #menu:target > ul
        {
            display: block;
        }
        #menu > ul > li
        {
            width: 100%;
            float: none;
        }

    /* second level */
    #menu li ul
    {
        position: static;
    }

    .show-menu { display:block;  }
}