为什么这个 CSS“菜单”有时会垂直而不是水平呈现？

Question

所以，我正在开发的网站有一个水平导航菜单。这是相关代码。

HTML：

<div class="nav">
<ul>
    <a href="index.html">
        <li>Home</li>
    </a>
    <a href="about.html">
        <li>About Us</li>
    </a>
    <a class="active" href="perspective.html">
        <li>Our Perspective</li>
    </a>
</ul>

CSS：

.nav ul a li{
    padding: 5px 15px;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: inline-block;
}

.nav ul a{
    color: #1d1d1d;
    text-decoration: none;
    font: bold .8em Georgia, "Times New Roman", Times, serif;
}

.nav ul a:hover li{
    background-color: rgba(0, 0, 0, 0.44);
    opacity: 1;
    -moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}

.nav ul a.active li{
    background-color: rgba(0, 0, 0, 0.44);
    opacity: 1;
    -moz-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    -webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
    box-shadow: -2px 0 2px rgba(0, 0, 0, 0.31), 2px 0 2px rgba(0, 0, 0, 0.31), 0 -2px 2px rgba(0, 0, 0, 0.31), 0 2px 2px rgba(0, 0, 0, 0.31);
}

您可以在这里查看该网站：pc.kraigh.com

因此，出于某种原因，每隔一段时间，列表将垂直呈现，而不是水平呈现。此外，有时（但不总是）每个 li 上都会有项目符号，就好像浏览器忽略了 list-style:none。

我的 CSS 选择器是否有问题导致了这种情况？为什么它只会偶尔发生一次？

注意：要使错误重现，请尝试快速更改页面或刷新页面几次。这是一个（链接到）屏幕截图，以证明它有时会发生！

Screenshot of Error (Imgur link)

编辑：好的，我现在明白它需要转到<ul><li><a>，但是，我希望整个<li> 区域都可以点击——而不仅仅是链接文本。有没有办法做到这一点？

Answer 1

<li> 必须是<ul> 的直接子代：

这是正确的：

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about.html">About Us</a></li>
  <li><a class="active" href="perspective.html">Our Perspective</a></li>
</ul>

您可以将width 和line-height 分配给<li> 以使其完全可点击。另外，padding 也有帮助。