Lists come with a few browser defaults that usually need to be reset before they can be used for navigation.
-
Remove list bullets:
nav li { list-style: none; }
-
Remove list padding (usually
40px
):nav ul { padding: 0; }
-
This is a tricky one. Links are
inline
by default. We need to set them toblock
so that proper padding and width can be applied.nav a { display: block; }
Standard html navigation menu:
<nav>
<ul class="container">
<li><a href="#">Fighter</a></li>
<li><a href="#">Wizard</a></li>
<li><a href="#">Bard</a></li>
<li><a href="#">Rogue</a></li>
</ul>
</nav>
- HTML
- CSS Selectors:
- Box model:
- MDN: The box model
- Stack Overflow: inline vs block elements
From here, the list can be further styled to create a navigation menu: