This is one way of using an unordered list and css to create a rollover navigation bar. Using the following code (note the /* are to hide styles from NN 4.x if you are using an external stylesheet you can omit those and use @ import for all sections that use the pseudo class :hover):
<!--
body {
background-color: #ffffff;
color: #000000;
font: medium "Trebuchet MS", Verdana, Arial, sans-serif;
}
#navlist {
white-space: nowrap;
}
#navlist ul{
margin: 0;
padding: 0;
list-style-type: none;
}
#navlist li {
margin: 0;
padding: 0;
display: inline;
height: 30px;
width: 175px;
}
#navlist a {
/*/*/display: inline;
padding: 3px;
margin: 0;
width: 175px;
background-color: #009999;
color: #ffffff;
font: bold small Georgia, "Times New Roman. Times", serif;
background-image: url(img/button1.jpg);/* */
}
#navlist a:link, #navlist a:visited {
color: #000;
/*/*/color: #EEE;
text-decoration: none; /* */
}
#navlist a:hover {
border: 1px solid #333;
background-color: #6699ff;
background-image: url(img/button1-ovr.jpg);
color: #ffffff;
}
#current a:link, #current a:visited, #current a:hover {
/*/*/
border: 1px solid #333;
background-color: #6699ff;
background-image: url(img/button1-ovr.jpg);
font: bold small Georgia, "Times New Roman. Times", serif;
color: #ffffff; /* */
}
-->
</style>
Page 1 | Page 2 | Page 3 | Page 4 | Page 5 | CSS MENU