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>
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;
}