How to make a navigation without overlapping shadows - html

Question

Here is the JSFiddle for the code: https://jsfiddle.net/93pwfrt8/
The menu I have at the moment currently looks like this:
I'm trying to achieve something along the lines of this:
For some reason the shadow of the sub menu of portfolio isn't reaching around the sub menu, and the shadow from the main menu is overlapping the sub menu.
Here is the html for the side bar:
<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 the 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'm looking for a solution with an explanation as to what I've done wrong so I don't mess up again.

Answer 1

though late in answering....but i would have preferred a little 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

You can achieve your desire situation by clip-path which can cut unwanted shadow.
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>

Answer 3

You can also use :pseudo element to add 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>