奇怪的行为与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。