-
Make the links big and clickable:
nav a { padding: 0.5rem 1rem; }
-
Remove the link underline and change default link colour:
nav a { text-decoration: none; color: indigo; }
-
Add a hover state to provide user feedback:
nav a:hover { background-color: papayawhip; }
-
Add a click state to provide even more user feedback:
nav a:active { background-color: indigo; color: white; }
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:
- MDN: Descendant combinator
- MDN: User action pseudo-classes
- MDN: :hover
- MDN: :active