CSS导航栏的奇怪行为

Question

在处理导航栏的CSS时，我注意到一种奇怪的行为。

使用：

#nav li {
    display: inline-block;
}

#nav li {
    font-size: 1em;
    line-height: 40px;
    width: 120px;
    height: 40px;
    font-family: Arial, sans-serif;
}

输出结果符合预期：

然而，当我结合两个CSS语句时：

#nav li {
    display: inline-block;
    font-size: 1em;
    line-height: 40px;
    width: 120px;
    height: 40px;
    font-family: Arial, sans-serif;
}

我得到一个意外的块样式输出：

如果有人能够向我解释这件事，那就太好了。感谢。

整个（相关）CSS：

#nav li {
  display: inline-block;
}
#nav ul {
  text-align: center;
  list-style: none;
  background-color: gray;
  margin: 0;
}
#nav li {
  font-size: 1em;
  line-height: 40px;
  width: 125px;
  height: 40px;
  font-family: Arial, sans-serif;
}
#nav a {
  text-decoration: none;
  color: white;
  display: block;
  transition: .5s background-color;
}
#nav a:hover {
  background-color: black;
}

<div id="nav">
  <ul>
    <li><a href="\Home.html">Home</a></li>
    <li><a href="\News.html">News</a></li>
    <li><a href="\Content.html">Content</a></li>
    <li><a href="\Products.html">Products</a></li>
  </ul>
</div>

Answer 1

问题已解决。我没有合并两个#nav li，结果发现我正在合并一个#nav li和#nav ul。