avoid menu li bottom shadow css - css

Question

I'm working on a menu list and I want to get rid of the shadow under the selected li, in this example the letter C.
This is my code so far.
html,
body {
background: #0769AD;
margin: 0 auto;
padding: 0;
}
div {
width: 400px;
margin: 0 auto;
padding: 0;
text-align: center;
}
div ul {
background: #fff;
width: 100%;
margin: 0;
padding: 0;
border-radius: 0px 0px 10px 10px;
box-shadow: rgba(255, 255, 255, 0.3) 0 1px 0, rgba(0, 0, 0, 0.3) 0 -1px 0;
box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}
div ul li {
display: inline-block;
padding: 5px 20px;
}
.selected {
background: #0769AD;
box-shadow: inset 0px 8px 6px 0px rgba(0, 0, 0, 0.3);
}
<div>
<ul>
<li>A</li>
<li>B</li>
<li class='selected'>C</li>
<li>D</li>
</ul>
</div>

Answer 1

Update div ul { box-shadow: 0 -5px 5px rgba(1, 1, 1, 0.7);}
html,body{
background:#0769AD;
margin:0 auto;
padding:0;
}
div {
width:400px;
margin:0 auto;padding:0;
text-align:center;
}
div ul{
background:#fff;
width:100%;
margin:0;padding:0;
border-radius: 0px 0px 10px 10px;
box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}
div ul li{
display:inline-block;
padding:5px 20px;
}
.selected{
background:#0769AD;
box-shadow: inset 0px 8px 6px 0px rgba(0,0,0,0.3);
position:relative;
}
.selected:after{
content:'';
display:block;
width:100%;
height:25px;
left:0;
top:0;
position:absolute;
box-shadow: 0 10px 0px #0769AD;
z-index:0;
}
<div>
<ul>
<li>A</li>
<li>B</li>
<li class='selected'>C</li>
<li>D</li>
</ul>
</div>