I know this has been already been answered, but here's how I was taught in one of my college class a while back on navigation.
<div id="nav">
<ul>
<li><a href="content.php">Edit CMS Content</a></li>
<li><a href="picture.php">Edit Picture(s)</a></li>
<li><a href="new_user.php">Add New User</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</div>
Here's my css styling for the navigation menu that I put in a separate file:
<link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
#nav {
float: left;
width: 300px;
height: 230px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: rgb(156, 233, 194);
padding: 0px;
margin: 0px;
}
#nav ul {
list-style: none;
list-style-position: outside;
list-style-image: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
padding: 0px;
margin: 10px 0px 0px 24px;
}
#nav ul li a {
float: left;
display: block;
width: 240px;
height: 50px;
background-color: rgb(8, 147, 202);
border-bottom: 1px solid #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
line-height: 50px;
color: #041036;
font-weight: bold;
text-decoration: none;
padding: 0px 0px 0px 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #fff;
background-color: rgb(169, 24, 53);
}
I think of it as staircase that is going a person is going down, by this I mean the following:
nav
nav ul
nav ul li
nav ul li a
nav ul li a:hover