Question about the problem in the shadow menu - html

Question

The shadow of my menu has a problem and when I click on the item that open a submenu , the shadow of opened submenu has a problem and it dosen't have any effect on the right of submenu that opened for the down item in the menu, what can I do ? I am too confused, I Appreciate it if you get the code instead of the link, thanks.
The Code:
ul {
/* border: 1px solid #555;*/
position:relative;
font-family: 'Roboto', sans-serif;
list-style: none;
padding: 0;
margin: 0;
background: #FFFFFF;
}
.borderm{
border-right:#606060 0.25px solid;
border-left:#606060 0.25px solid;
}
ul li {
position:relative;
text-align: center;
font-family: 'Roboto', sans-serif;
display: block;
position: relative;
float: right;
background: #FFFFFF;
}
/* This hides the dropdowns */
li ul { display: none;}
ul li a {
font-size: 13px;
font-family: 'Roboto', sans-serif;
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: black;
}
/* Display the dropdown */
li:hover > ul {
font-family: 'Roboto', sans-serif;
display: block;
position: absolute;
}
li:hover li { float: none;font-family: 'Roboto', sans-serif;}
li:hover li a:hover { background: #ff4718; color: white;font-family: 'Roboto', sans-serif;}
ul:hover ul{
-webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
-moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) outset;
}
.main-navigation li ul li { border-top: 0;}
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
width: 105px;
font-family: 'Roboto', sans-serif;
right: 100.1%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
font-family: 'Roboto', sans-serif;
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both;font-family: 'Roboto', sans-serif;}
.expand{font-size:24px;float: left;margin: -9px -5px;}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.effect1{
-webkit-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 8px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;
/*box-shadow: 1px 1px 0px grey;*/
}
.tri
{
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #555;
border-bottom: 25px solid transparent;
}
<nav id="bg1" class="navbar">
<ul class="main-navigation">
<li class="w3-center w3-animate-right effect1">Menu</p>
<ul class="effect1" style="right: 0%;">
<li class="w3-center w3-animate-right effect1" style="width: 150px;"><span class="expand">◂</span>Front End Design
<ul class="effect1">
<li class="w3-center w3-animate-right effect1">HTML</li>
<li class="w3-center w3-animate-right effect1"><span class="expand">◂</span>CSS
<ul class="effect1">
<li class="w3-center w3-animate-right effect1">Resets</li>
<li class="w3-center w3-animate-right effect1">Grids</li>
<li class="w3-center w3-animate-right effect1">Frameworks</li>
</ul>
</li>
<li class="w3-center w3-animate-right effect1"><span class="expand">◂</span>Javascript
<ul class="effect1">
<li class="w3-center w3-animate-right effect1">Ajax</li>
<li class="w3-center w3-animate-right effect1">jQuery</li>
</ul>
</li>
</ul>
</li>
<li class="w3-center w3-animate-right effect1">About Us</li>
</li>
</ul>
</li>
<!-- Header Nav End -->
</nav>

Answer 1

If you have so many uls in css, it will be the solution
ul ul ul {
z-index: 1;
}