How to make navigation without overlapping shadows

Question

Here is the JSFiddle code for the code: https://jsfiddle.net/93pwfrt8/

Currently, the menu that I have is as follows:

I am trying to achieve something like this:

For some reason, the shadow of the portfolio submenu does not approach the submenu, and the shadow from the main menu overlaps the submenu.

Here is the html for the sidebar:

<aside>
    <nav>
        <ul>
        <li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
        <li>Portfolio
            <ul>
                <li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
                <li><a onclick = "$(#content).load(selector.php?content='about'); return false">About</a></li>
            </ul>
        </li>
        </ul>
    </nav>
</aside>

And css:

html,
body {
  height: 100%;
  width: 100%;
}

nav {
  text-align: center;
}

nav ul {
  padding: 0px;
  text-align: center;
  list-style: none;
  width: 100%;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}

nav ul li {
  color: #000;
  padding: 20px;
  font: bold 12px/18px sans-serif;
  display: block;
  position: relative;
  background-color: #FFF;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

nav ul li:hover {
  background: #EBEBEB;
  color: #F00;
}

nav ul li ul {
  position: absolute;
  top: 0px;
  right: -60%;
  width: 60%;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

nav ul li ul li {
  background: #EBEBEB;
  display: block;
  color: #fff;
  width: 100%;
}

nav ul li ul li:hover {
  background: #ABABAB;
}

nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: -1;
}

nav ul li>a {
  text-decoration: none;
  color: #000;
}

nav ul li:hover >a {
  color: #F00;
}

aside {
  float: left;
  position: fixed;
  width: 15%;
  clear: both;
}

I am looking for a solution with an explanation of what I did wrong, so I did not mess up again.

Answer 1

although late in reply .... but I would prefer the slightly old school method, z-index!! :)

demo

nav ul {
  z-index:1;/*added*/
  position:relative;/*added*/
  padding: 0px;
  text-align: center;
  list-style: none;
  width: 100%;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}


nav ul li ul {
  position: absolute;
  top: 0px;
  right: -60%;
  width: 60%;
  display: none;
  opacity: 0;
  z-index:999; /*added*/
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

Answer 2

clip-path, .

Jsfiddle

html,
body {
  height: 100%;
  width: 100%;
}
nav {
  text-align: center;
}
nav ul {
  padding: 0px;
  text-align: center;
  list-style: none;
  width: 100%;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}
nav ul li {
  color: #000;
  padding: 20px;
  font: bold 12px/18px sans-serif;
  display: block;
  position: relative;
  background-color: #FFF;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav ul li:hover {
  background: #EBEBEB;
  color: #F00;
}
nav ul li ul {
  position: absolute;
  top: 0px;
  right: -100.1%;
  z-index: 10;
  -webkit-clip-path: polygon(17% 0, 100% 0%, 100% 75%, 100% 100%, 0% 103%, -9% 50%, 17% 50%);
  clip-path: polygon(17% 0, 100% 0%, 100% 75%, 100% 100%, 0% 103%, -9% 50%, 17% 50%);
  width: 100%;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
nav ul li ul li {
  background: #EBEBEB;
  display: block;
  color: #fff;
}
nav ul li ul li:hover {
  background: #ABABAB;
}
nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
nav ul li>a {
  text-decoration: none;
  color: #000;
}
nav ul li:hover >a {
  color: #F00;
}
aside {
  float: left;
  position: fixed;
  width: 15%;
  clear: both;
}

<aside>
  <nav>
    <ul>
      <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
      </li>
      <li>Portfolio
        <ul>
          <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
          </li>
          <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</aside>

Hide result

Answer 3

:pseudo box-shadow

html,
body {
  height: 100%;
  width: 100%;
}
nav {
  text-align: center;
}
nav ul {
  padding: 0px;
  text-align: center;
  list-style: none;
  width: 100%;
  position: relative;
}
nav ul:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -2;
  -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.9);
}
nav ul ul:after {
  z-index: -2;
  right: -70%;
}
nav ul li {
  color: #000;
  padding: 20px;
  font: bold 12px/18px sans-serif;
  display: block;
  position: relative;
  background-color: #FFF;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
nav ul li:hover {
  background: #EBEBEB;
  color: #F00;
}
nav ul li ul {
  position: absolute;
  top: 0px;
  right: -60%;
  width: 60%;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
nav ul li ul li {
  background: #EBEBEB;
  display: block;
  color: #fff;
  width: 100%;
}
nav ul li ul li:hover {
  background: #ABABAB;
}
nav ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index: -1;
}
nav ul li>a {
  text-decoration: none;
  color: #000;
}
nav ul li:hover >a {
  color: #F00;
}
aside {
  float: left;
  position: fixed;
  width: 15%;
  clear: both;
}

<aside>
  <nav>
    <ul>
      <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
      </li>
      <li>Portfolio
        <ul>
          <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
          </li>
          <li><a onclick="$(#content).load(selector.php?content='about'); return false">About</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</aside>

Hide result