CSU Ram Head Logo

JTC 372

Web Design and Management

CSS List Navigation Example

HTML

<div id="nav">
        <ul>
           <li><a href="#">Item 1</a></li>
           <li><a href="#">Item 2</a></li>
           <li><a href="#">Item 3</a></li>
           <li><a href="#">Item 4</a></li>
           <li><a href="#">Item 5</a></li>
        </ul>
</div>

CSS

 

#nav {
background-color: #060;
overflow: auto;
width: 750px;
}

#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

#nav li {
float: left;
width: 20%;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}

#nav a {
color: #FFF;
}