Помогите доработать код что-бы создать тени в меню на CSS

HTML:
<nav id="menu1">
<ul>
<li><a href="#m1">MENU</a></li>
<li><a href="#m2">MENU</a></li>
<li><a href="#m3">MENU</a>
<ul>
<li><a href="#m3_1">Menu</a></li>
<li><a href="#m3_2">Menu</a></li>
<li><a href="#m3_3">Menu</a></li>
<li><a href="#m3_4">Menu</a></li>
<li><a href="#m3_5">Menu</a></li>
</ul>
</li>
<li><a href="#m4">MENU</a></li>
<li><a href="#m5">MENU</a></li>
</ul>
</nav>

CSS:
body{
background-color:blue;
}
#menu1{
position: relative;
display: block;
width: 100%;
height: auto;
z-index: 10;
}
#menu1 ul{
position: relative;
display: block;
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
list-style: none;
}
#menu1 > ul::after{
display: block;
width: 100%;
height: 0px;
clear: both;
content: " ";
}
#menu1 ul li{
position: relative;
display: block;
float: left;
width: auto;
height: auto;
}
#menu1 ul li a{
display: block;
padding: 9px 25px 0px 25px;
font-size: 14px;
line-height: 1.3em;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
height: 36px;
box-sizing: border-box;
color: white;
}
#menu1 ul li ul{
position: absolute;
top: 36px;
left: 0px;
display: none;
width: 200px;
background: #38b6ff;
}
#menu1 ul li:hover ul{
display: block;
}
#menu1 ul li ul li{
float: none;
width: 100%;
}
#menu1 ul li ul li a{
display: block;
text-transform: none;
height: auto;
padding: 7px 25px;
width: 100%;
box-sizing: border-box;
border-top: 1px solid #ffffff;
color: white;
}
#menu1 ul li ul li:first-child a{
border-top: 0px;
}
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
#navbar a {
background-color: #949494;
color: #fff;
padding: 5px;
text-decoration: none;
font-weight: bold;
border-left: 5px solid #33ADFF;
display: block;
нужно получить примерно такой результат меню:сейчас выглядит так: