Simple rollover menu
This tutorial teaches the best method to arrange your navigation, and make it look cool as well :)
The first thing to do is to put your links in an unordered list. This is the code how to do it:
<ul class="menu">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">links</a></li>
</ul>At first, it will not look so great.
But, if we use the CSS below to apply some visual formatting...
.menu {
margin: 0px;
padding: 0px;
color: #000;
width: 120px;
list-style: none;
}
.menu li {
padding: 2px 2px 0px 0px;
margin: 0px;
}
.menu li a, .menu li a:visited {
margin: 0px;
padding: 3px 3px;
color: #fff;
display: block;
border: #ccc 1px solid;
background: #666;
text-decoration: none;
}
.menu li a:hover {
color: #000;
background: #ccc;
border: #000 1px solid;
}...our navbar looks like this:
Want to make the navbar horizontal? No problem. Delete where it says width: 120px; and
add these lines of CSS on the end of your stylesheet:
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
Easy, right? :) Now just change the numeric and color values, and you have a nice navigation to
use on your website.
If you'd like to make a more appealing menu using images, proceed to the
Image rollover menu tutorial.
