奇怪的行爲與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。