The reason for this occurrence is when inline elements wrap around block level elements, they are divided into block level elements by the child block. According to the w3 specification:
When an inline box contains an in-flow block-level box, the inline box (along with its inline ancestors within the same line box) is broken around the block-level box. This results in splitting the inline box into two separate boxes on either side of the block-level box(es). The line boxes before and after the break are encompassed in anonymous block boxes, while the block-level box becomes a sibling to these anonymous boxes.
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
To simplify it further, the inline box parent is split into block level boxes by the child element with the specified display: block property.
If you refer to the provided link, you will find a diagram illustrating the concept of an "anonymous box" that wraps inline text within a block followed by a block-level element (in this case, a <p>). Therefore, in summary, the explanation highlights that the inline box parent is segmented into block level boxes by the child with the display: block attribute.
Does this clarify things for you?
To resolve this issue effectively, consider setting the li to display:inline-block
To assist you further, I have duplicated your code and implemented the necessary modification below.
#nav {
list-style-type-none
}
#nav li {
display: inline-block;
}
/* ensure LI's stack horizontally */
#nav li a {
display: block;
padding: 5px;
}
/* convert to block for added padding */
<ul id="nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">About us</a>
</li>
</ul>