CSS z-index and box-shadow clipping problem

Question

body {
  background-color: gray;
}

h1 {
  color: white;
  text-align: center;
}

nav {
  margin: 30px;
}

ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 15px;
  min-height: 150px;
  margin: 0 1px;
  transition: all 0.3s ease-out;
  background-color: white;
  /* adding z-index here makes shadow on the right side to dissapear */
  z-index: 1;
}

li:hover {
  box-shadow: 0px 0px 65px -26px rgba(0, 0, 0, 0.75);
  transform: scale(1.09);
  /* if using z-index on hover it has overlap at the end
    z-index: 1; */
}

nav>span {
  position: absolute;
  left: calc(50% - 50px / 2);
  background: white;
  width: 50px;
  margin: 0 auto;
  box-shadow: inset 0px 6px 5px 0px grey;
  height: 22px;
  transition: all 0.3s ease;
}

nav>span:hover {
  cursor: pointer;
  height: 28px;
  margin-bottom: -3px;
  box-shadow: inset 0px 3px 5px 0px grey;
}

<nav>
  <ul>
    <li>item1</li>
    <li>hover me <br/>check box shadow on right side is missing because of z-index:1</li>
    <li>i want this item to be over the tiny square always but also with box shadow on right side working</li>
    <li>item4</li>
    <li></li>
  </ul>
  <span>
    
  </span>
</nav>
<h1>
  Some fake text which must not move, hence the little square is positioned absolute
</h1>

<p>
  1. Try removing z-index from li <br/> 2. Try having z-index on li hover only
</p>

JS Fiddle link

What i'm trying to achieve is a hover effect of the middle square box with box-shadow working.

For some reason if I use z-index:1 for all the big boxes, the box shadow is clipped on the right side. (see image)

The reason why I added z-index:1 is so that the middle box stays on top of the tiny square below it, which itself is position: absolute.

The reason why the tiny box is positioned: absolute; is to not shift any text below itself when it grows on mouse over.

The constraints are :

1. Make the tiny white box to always appear behind the big boxes with shadow.
2. Make sure the shadow works correctly on both sides.
3. Make sure when hovering over the tiny white box, and it grows in height, it doesn't shift any elements below itself.

Answer 1

Try removing z-index from li and applying a double box-shadow. You can adjust blur, spread, and color as per your requirements.

body {
  background-color: gray;
}

h1 {
  color: white;
  text-align: center;
}

nav {
  margin: 30px;
}

ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 15px;
  min-height: 150px;
  margin: 0 1px;
  transition: all 0.3s ease-out;
  background-color: white;
  /* adding z-index here makes shadow on the right side to dissapear */
  /* z-index: 1; */
}

li:hover {
  box-shadow: -11px -8px 20px 2px black, 3px 5px 20px 14px black;
  transform: scale(1.09);
  z-index: 1;
  
  /* if using z-index on hover it has overlap at the end
    z-index: 1; */
}

nav>span {
  position: absolute;
  left: calc(50% - 50px / 2);
  background: white;
  width: 50px;
  margin: 0 auto;
  box-shadow: inset 0px 6px 5px 0px grey;
  height: 22px;
  transition: all 0.3s ease;
  z-index: 0;
}

nav>span:hover {
  cursor: pointer;
  height: 28px;
  margin-bottom: -3px;
  box-shadow: inset 0px 3px 5px 0px grey;
}

<nav>
  <ul>
    <li>item1</li>
    <li>hover me <br/>check box shadow on right side is missing because of z-index:1</li>
    <li>i want this item to be over the tiny square always but also with box shadow on right side working</li>
    <li>item4</li>
    <li></li>
  </ul>
  <span>
    
  </span>
</nav>
<h1>
  Some fake text which must not move, hence the little square is positioned absolute
</h1>

<p>
  1. Try removing z-index from li <br/> 2. Try having z-index on li hover only
</p>

edit: change z-index of nav>spna.

Answer 2

Consider an immediate change of z-index like below:

body {
  background-color: gray;
}

h1 {
  color: white;
  text-align: center;
}

nav {
  margin: 30px;
}

ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 15px;
  min-height: 150px;
  margin: 0 1px;
  transition: all 0.3s ease-out;
  background-color: white;
  /* adding z-index here makes shadow on the right side to dissapear */
  z-index: 1;
}

li:hover {
  box-shadow: 0px 0px 5px 6px rgba(0, 0, 0, 0.75);
  transform: scale(1.09);
  z-index: 2;
  transition: all 0.3s ease-out,z-index 0s 0s;
}

nav>span {
  position: absolute;
  left: calc(50% - 50px / 2);
  background: white;
  width: 50px;
  margin: 0 auto;
  box-shadow: inset 0px 6px 5px 0px grey;
  height: 22px;
  transition: all 0.3s ease;
}

nav>span:hover {
  cursor: pointer;
  height: 28px;
  margin-bottom: -3px;
  box-shadow: inset 0px 3px 5px 0px grey;
}

<nav>
  <ul>
    <li>item1</li>
    <li>hover me <br/>check box shadow on right side is missing because of z-index:1</li>
    <li>i want this item to be over the tiny square always but also with box shadow on right side working</li>
    <li>item4</li>
    <li></li>
  </ul>
  <span>
    
  </span>
</nav>
<h1>
  Some fake text which must not move, hence the little square is positioned absolute
</h1>

<p>
  1. Try removing z-index from li <br/> 2. Try having z-index on li hover only
</p>

Answer 3

Increase the z-index value on hover:

li:hover {
    box-shadow: 0px 0px 65px -26px rgba(0, 0, 0, 0.75);
    transform: scale(1.09);
    z-index: 2;
}