#nav-list
{
    /* container */    
    color: #494949;
}
    #nav-list > a
    {
	    font-size: 18px;
        display: none;
        color: #494949;
    }
    #nav-list li
    {
        position: relative;
    }
 
    /* first level */
 
    #nav-list > ul
    {
        height: 62px;
    }
        #nav-list > ul > li
        {
            width: 20%;
            height: 100%;
            float: left;
        }
 
    /* second level */
 
    #nav-list li ul
    {
        display: none;
        position: absolute;
        top:48px;
        width: 100%;
    }
        #nav-list li:hover ul
        {
            display: block;
        }

@media only screen and ( max-width: 40em ) /* 640 */
{
    #nav-list
    {
        position: relative;
        top:10px;
    }
        #nav-list > a
        {
        }
        #nav-list:not( :target ) > a:first-of-type,
        #nav-list:target > a:last-of-type
        {
            display: block;
        }
 
    /* first level */
 
    #nav-list > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
        #nav-list:target > ul
        {
            display: block;
        }
        #nav-list > ul > li
        {
            width: 100%;
            float: none;
        }
 
    /* second level */
 
    #nav-list li ul
    {
        position: static;
    }
}