Нечетное поведение с навигационной панелью 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.