为什么这是CSS；菜单“；有时垂直渲染而不是水平渲染？

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

HTML:

您可以在此处查看网站：

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

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

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

---

编辑：好的，我现在知道它需要转到

，但是，我希望整个
区域都可以单击，而不仅仅是链接文本。有办法做到这一点吗？
我怀疑这与您正在用
标记包装
元素有关

应该是

标签应该只是支架，而
标签应该是可点击的部分。玩弄这些样式，可能类似于
display:block；填充：10px
需要是
的直接子女：

这是正确的：

<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>







您可以将
宽度
和
行高度
指定给
，使其完全可点击。另外，
padding
也有帮助。
jsiddle示例：


ul
的直接子项必须是
li
s<代码>
标题
啊，明白了。那么，我如何使整个li可点击，而不仅仅是链接文本？请参阅我的答案和小提琴中的固定css。这是我一开始所做的，但我希望整个
区域可点击，而不仅仅是链接文本。这可能吗？将
的CSS设置为
显示：内联块
或
显示：块
两个
li
和
a
都是
内联块
，这样
li
将被紧密地收缩到
a
。
.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);
}

<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>

<div class="nav">
<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>
</div>​

.nav ul {
    display: block;
    text-align: center;
}

.nav ul li {
    display: inline-block;
}