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).