删除两个导航项之间的阴影

Question

我尝试创建导航菜单，但有一个问题。

这就是我的HTML：

<div id="navigation">
  <ul>
    <li class="active"><a href="#">fd</a></li>
    <li><a href="#">vc</a></li>
    <li><a href="#">ew</a></li>
    <li><a href="#">ds</a></li>
    <li><a href="#">vcx</a></li>
    <li class="active"><a href="#">re</a></li>
  </ul>
</div>

CSS文件在codepen项目上，因为它太大了。问题在于两个最接近的菜单项，其中一个是活动的，另一个是应用了悬停。怎么可能修复它？我的意思是去除它们之间的阴影。

http://cdpn.io/asjde

Answer 1

如果您希望导航中没有框阴影，只需将其从css中删除即可消除导航中的阴影。

box-shadow: inset -4px 0 7px -5px black, inset 4px 0 7px -5px black;