Navigation list: reset browser defaults

README.md

Navigation: Resetting default list styles

Lists come with a few browser defaults that usually need to be reset before they can be used for navigation.

1. Remove list bullets:

   nav li {
     list-style: none;
   }

2. Remove list padding (usually 40px):

   nav ul {
     padding: 0;  
   }

3. This is a tricky one. Links are inline by default. We need to set them to block so that proper padding and width can be applied.

   nav a {
     display: block;
   }

Assumptions

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>

Background material

1. HTML
   • The Navigation Section element
2. CSS Selectors:
   • MDN: Descendant combinator
3. Box model:
   • MDN: The box model
   • Stack Overflow: inline vs block elements

Related Gists

From here, the list can be further styled to create a navigation menu:

• Vertical nav menu
• Horizontal nav menu
• Horizontal nav menu - full width

index.html

<nav>
  <ul>
    <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>

style.css

nav ul {
  padding: 0;  
}

nav li {
  list-style: none;
}

nav a {
  display: block;
}