Html 在单个导航项目上添加方框阴影

我正在制作我自己的网站，对于菜单，我有一段艰难的时光。这就是菜单现在的样子

除了一件事，一切都很完美！我正在尝试将框阴影添加到“Blog”菜单项中，如果您放大，您将在“Blog”的左侧和顶部看到框阴影。但它不会出现在右边。看起来“关于”是重叠的

框阴影代码中没有问题。但是，这里是：

box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
-webkit-box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);
-moz-box-shadow: 0 0 10px 3px rgba(0,0,0,0.12);

以下是HTML文件：

<footer>
  <nav class="main">
    <ul>
      <li style="background: #33A2FF;">
        <a href="#">
          <span aria-hidden="true" data-icon="&#xec02;" class="icon icon-briefcase"></span>
          PROJECTS
        </a>
      </li>
      <li style="background: #22E886;">
        <a href="#">
          <span aria-hidden="true" data-icon="&#xe92e;" class="icon icon-bucket"></span>
          DESIGNS
        </a>
      </li>
      <li style="background: #ACFF32;">
        <a href="#" class="highlight">
          <span aria-hidden="true" data-icon="&#xe91c;" class="icon icon-pen"></span>
          BLOG
        </a>
      </li>
      <li style="background: #E8BA22;">
        <a href="#">
          <span aria-hidden="true" data-icon="&#xec27;" class="icon icon-brain"></span>
          ABOUT
        </a>
      </li>
      <li style="background: #FF6F25;">
        <a href="#">
          <span aria-hidden="true" data-icon="&#xea35;" class="icon icon-mailbox"></span>
          CONTACT
        </a>
      </li>
    </ul>
  </nav>
</footer>

还有一件事，这对你来说很重要。如果我将背景添加到导航标签上，并删除菜单项上的所有颜色，框阴影将起作用。所以，单独定义颜色会引起问题

---

非常感谢。

您需要使活动选项卡的z索引高于其他选项卡，以便阴影保持在顶部：

因此，将此添加到

nav.main ul li a.highlight

：

position: relative;
z-index: 2;

---

您需要使活动选项卡的z索引高于其他选项卡，以便放置阴影保持在顶部：

因此，将此添加到

nav.main ul li a.highlight

：

position: relative;
z-index: 2;

---

盒影：10px 10px 10px 3px rgba（0,0,0,0.12）@不，它不起作用。但正如我所说，问题不在于盒子阴影。我查过了。关于部分是重叠阴影。框阴影：10px 10px 10px 3px rgba（0,0,0.12）@不，它不起作用。但正如我所说，问题不在于盒子阴影。我查过了。关于部分是重叠阴影。是的，它起作用了。非常感谢你。我还添加了z-index，但没有成功。所以，看起来我还必须添加

position:relative

，但您能告诉我它的目的是什么吗？每当您想在元素上使用z-index属性时，您必须同时定义position属性，否则定义z-index将无效。如果一个元素没有定义position属性（比如在本例中），那么您可以使用“position:relative”，因为这是默认值。不客气！这里是我在上面提到的，记录在案的：“z-index只对定位元素起作用（位置：绝对，位置：相对，或位置：固定）。”是的，它起作用了。非常感谢你。我还添加了z-index，但没有成功。所以，看起来我还必须添加

position:relative

，但您能告诉我它的目的是什么吗？每当您想在元素上使用z-index属性时，您必须同时定义position属性，否则定义z-index将无效。如果一个元素没有定义position属性（比如在本例中），那么您可以使用“position:relative”，因为这是默认值。不客气！下面是我在上面提到的，有文档记录的：“z-index只对定位元素起作用（位置：绝对、位置：相对或位置：固定）。”