#nav-list > a
    {
	    font-size: 20px;
	    text-align: center;
        display: none;
        color: #fff;
        float:left;
        width:100%;
    } 
    /* first level */ 
    #nav-list > ul
    {
        height: auto;
    }
        #nav-list > ul > li
        {
            width: 20%;
            height: 100%;
            float: left;
        }
 
    /* second level */
 
    #nav-list li ul
    {
        position: fixed;
        top:205px;	
    }
        #nav-list li:hover ul
        {
/*             display: block; */
        }

@media only screen and ( max-width: 40em ) /* 640 */
{
    #nav-list
    {
        position: relative;
        top:9px;
    }
        #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;
		max-height: 70vh;
		overflow-y: scroll;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top:30px;
    }
        #nav-list:target > ul
        {
            display: block;
        }
        #nav-list > ul > li
        {
            width: 100%;
            float: none;
        }
        #nav-list li ul:hover {
		    display: flex;
		    left: 0px;
			top: 305px;
			width: 100%;
			z-index: 200;			
	    }
 
    /* second level */
 
    #nav-list li ul
    {
	     top:45px;
        position: static;
    }
}