## Horizontal navigation: A more complete example

Example 4.10 - list-style: none; - Example 4.10<nav><ul id="extglobalnav"><li><a href="#">About</a></li><li><a href="#">Calendar</a></li><li><a href="#">For Degree Candidates</a></li><li><a href="#">Courses</a></li><li><a href="#">Faculty Directory</a></li><li class="login"><a href="#">Login</a></li></ul></nav>#extglobalnav { list-style: none; padding-left: 0; float: right; margin-right: 2em; font-family: Arial Narrow, sans-serif; } #extglobalnav li { display: inline; padding-left: 2em; font-weight: bold; } #extglobalnav a:link, #extglobalnav a:visited, #extglobalnav a:active { color: #4d84c4; text-decoration: none; } #extglobalnav a:hover { text-decoration: underline; color: #990000; } #extglobalnav li.login { padding: 0.3em 1em; border: 3px solid #4d84c4; margin-left: 2em; }

- Markup
- Style
- Screenshot

     <nav>
       <ul id="extglobalnav">
         <li>
           <a href="#">About       </a>
         </li>
         <li>
           <a href="#">Calendar       </a>
         </li>
         <li>
           <a href="#">For Degree Candidates       </a>
         </li>
         <li>
           <a href="#">Courses       </a>
         </li>
         <li>
           <a href="#">Faculty Directory       </a>
         </li>
         <li class="login">
           <a href="#">Login       </a>
         </li>   </ul> </nav>

In `style` element (`<style>`) within `head` element:

    #extglobalnav {
       list-style: none;
       padding-left: 0;
       float: right;
       margin-right: 2em;
       font-family: Arial Narrow, sans-serif;
      }
      #extglobalnav li {
       display: inline;
       padding-left: 2em;
       font-weight: bold;
      }
      #extglobalnav a:link,
      #extglobalnav a:visited,

      #extglobalnav a:active
      {
        color: #4d84c4;
        text-decoration: none;
      }
      #extglobalnav a:hover {
        text-decoration: underline;
        color: #990000;
      }
      #extglobalnav li.login {
        padding: 0.3em 1em;
        border: 3px solid #4d84c4;
        margin-left: 2em;
      }