Как сделать выпадающие разделы

#mainmenu ul li{
    position:relative;
}
 
#mainmenu ul li ul{
    visibility: hidden;
    position: absolute;
    top: 30px;
    background: #fff;
    opacity: 0;
    transition: all 300ms ease;
    padding: 10px;
    width: 140px;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.35);
}
 
#mainmenu ul li:hover ul{
    visibility:visible;
    opacity:1;
}

 
#mainmenu ul {
	background: #fff;
	box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.5);
	display: none; /*для полноценного скрытия*/
	margin: 0;
	padding: 5px 10px;
	position: absolute;
	top: 40px;
	left: 0;
	opacity: 0;
	max-width:200px; /*ограничение меню для слишком длинных пунктов*/
}
 
#mainmenu > li:hover ul {
	display: block;
	opacity: 1;
	transition: opacity .3s linear;  /*Плавное появление, для скрытия из-за display:none; не устанавливается*/
}
 
#mainmenu > li ul li{
	display:block; /*один пункт на строку*/
}
 
#mainmenu > li ul li a{
	text-decoration:none; /*без подчеркивания ссылок для выпадающих пунктов*/
}
 

 
#mainmenu {
    position:relative;
    display:inline-block;
    margin:0;
    padding:0;
}
#mainmenu > li {
    position:relative;
    height:40px;
    float:left;
    margin:0;
    padding:0;
    background:none;
}
#mainmenu > li > a {
    display: block;
    height:40px;
    margin:0;
    padding:0 10px;
    line-height:40px;
    font-family:'SolomonBold';
    font-size:14px;
    text-decoration: none;
    text-transform:uppercase;
    color:#fff;    
    -webkit-transition: all 220ms ease-in-out;
    -moz-transition: all 220ms ease-in-out;
    -ms-transition: all 220ms ease-in-out;
    -o-transition: all 220ms ease-in-out;
    transition: all 220ms ease-in-out;
}
#mainmenu li a:hover,
#mainmenu li a.selected  {
    color:#398803;
}