When attempting to design a basic navbar, I encountered an issue where the list items were stacking on top of each other instead of displaying horizontally as intended. The parent container has a position of relative, while the child is set to absolute.
body {
margin: 0;
padding: 0;
background-color: #eee;
}
.navbarMenu {
width: 100%;
background-color:#fff;
position: relative;
}
.navbarMenu li {
list-style: none;
text-align: center;
position: absolute;
display: inline-block;
right: 5px;
}<ul class="navbarMenu">
<li><a href="#">Display</a></li>
<li><a href="#">Float</a></li>
<li><a href="#">flexbox</a></li>
<li><a href="#">Home</a></li>
</ul>