#main-menu { 
    position:absolute;
     
    z-index:2;
     
    display:none; 
    width:75%;
    
    padding:10px; 
    background-color:#234;
    opacity:0.99;
    color:#fff;
    height:100%;
    height:100%;
    overflow-y: auto; 
 }
 
 #main-menu.selected{
    display:block;
 }
 #main-menu ul{
    margin:0;
    padding-left:20px; 
 }
 #main-menu li ul{ 
    border-left: 1px dashed #666;
 }
 #main-menu ul li ul{
    display:none;
 }
 #main-menu ul li.selected > ul{
    display:block;
 }
 #main-menu li{ 
    padding:5px 2px; 
    
 }
 #main-menu li:not(.selected.parent){
    border-bottom: 1px dashed #666;   
 }
 #main-menu a{ 
    color:inherit;
    background-color:inherit; 
 }
 #main-menu li:not(.parent)>a{
    display:block;
 }
 
 #main-menu li.parent{ 
    background-image: url(/images/expand.png);
    background-position: right 10px;
    background-repeat:no-repeat;
    background-size:15px;  
 }
 #main-menu li.parent.selected{ 
    background-image: url(/images/collapse.png);
     
 } 
 #main-menu li.parent.selected >a{  
    color:#3cf;
    font-weight:bold;
 }
 #main-menu li a:hover{
    color:#f5c !important;
 }
 
#main-nav  img:hover {
    background-color: #cff;
} 

@media  screen and (min-width:700px){
    #main-menu{
        width:400px;
    }
}