Right-aligned Navbar

Similar to simple navbar. But #navbar li{} style rule uses float:right; rather than float:left;.

    /* Make list horizontal */    
    #navbar li{
      /* Right-aligned navbar only */
      float:right;
    }
    

Link style rule puts the border on the left side of each item, rather than the right side.

    #navbar li a,
    #navbar li a:link,
    #navbar li a:visited{
       ...
       /* For right-aligned navbar only */
       border-left:solid 1px #ccc;
       ...
    }

Items within the menu have to be typed in reverse order, like this. (Because floats apply to subsequent elements).

  <div id="navbar">
    <ul>
      <li><a href="#">NavItem4</a></li> 
      <li><a href="#">NavItem3</a></li>
      <li><a href="#">NavItem2</a></li>
      <li><a href="navhome.html">Home</a></li>
     </ul>
  </div><!-- End navbar -->

Click Home to return to opening page. All other links are just placeholders (they don't take you anywhere).