CSS Rollover Navigation Tutorial

Tutorial

  1. Put the following code onto your website where you want the navigation.
    <ul class="rollover">
        <li><a href="#">Home</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Updates</a></li>
    </ul>
  2. Edit the above code so that the links lead to your pages. Change each # to the address of the page, and "Home", "Links", and "Updates" to the names of the pages. You can add as many links as you want.
  3. Put the following code into the <head> part of your website or in your CSS file.
    <style type="text/css">
    .rollover {
        list-style: none;
        padding: 0;
    }

    .rollover a {
        font-family: "Tahoma";
        font-size: 1.0em;
        margin-bottom: 5px;
        margin-right: 5px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        text-align: center;
        text-decoration: none;
        width: 60px;
    }

    .rollover a:link, .rollover a:visited {
        background-color: #CCCCCC;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
        color: #333333;
    }

    .rollover a:hover, .rollover a:active {
        background-color: #00CC00;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
        color: #000000;
    }
    </style>
  4. If you want the buttons to be beside each other (horizontal), add this code to the same place as in the previous step. If you want the buttons to go one below another (vertical), you don't need another code.
    <style type="text/css">
    .rollover li {
        display: inline;
    }
    </style>
  5. If you want the buttons to all be the same width, add this code to the same place as in the previous step.
    <style type="text/css">
    .rollover a {
        display: block;
        width: 100px;
    }
    </style>
    You can change "100px" to be the size you want.
  6. Look at the second section of the code:
    .rollover a {
        font-family: "Tahoma";
        font-size: 1.0em;
        margin-bottom: 5px;
        margin-right: 5px;
        padding-bottom: 2px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        text-align: center;
        text-decoration: none;
    }
    You can change each attribute to change the button's general appearance.
    "font-family: 'Tahoma';" is the font. Some other fonts that should appear correctly in most browsers are "Times New Roman", "Verdana", "Arial", "Georgia", "Comic Sans MS", or "Trebuchet MS".
    "font-size: 1.0em;" is the font size.
    "margin-bottom: 5px;" is the number of pixels below the button. This attribute only affects vertical buttons.
    "margin-right: 5px;" is the number of pixels beside the button. This attribute only affects horizontal buttons.
    "padding" is the extra space around the text inside the buttons. Making the padding bigger will make the button bigger.
    "text-align: center;" is the alignment of the text. You can change "center" to "left" or "right".
    "text-decoration: none;" specifies that there should be no underline beneath the text. You can change "none" to "underline" to see the underline.
    "width: 60px;" is the width of the button. If your link text is long, you will want a bigger width. If you don't care if the buttons are all the same width, you can remove this line.
  7. Look at the next section of the code:
    .rollover a:link, .rollover a:visited {
        background-color: #CCCCCC;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
        color: #333333;
    }
    You can change each of the attributes to change the look of the button when there is no cursor over it.
    "background-color: #CCCCCC;" is the background colour of the button. "#CCCCCC" can be changed to another colour value.
    "border-color: #000000;" is the border colour. "#000000" can be changed to another colour value.
    "border-style: solid;" is the border style. "solid" can be changed to "dotted" or "dashed".
    "border-width: 1px;" is the border width. "1px" can be changed to another number. Change "1px" to "0px" if you don't want a border.
    "color: #333333;" is the font colour. "#333333" can be changed to another colour value.
  8. Look at the next section of the code:
    .rollover a:hover, .rollover a:active {
        background-color: #00CC00;
        border-color: #000000;
        border-style: solid;
        border-width: 1px;
        color: #000000;
    }
    You can change each of the attributes to change the look of the button when there is no cursor over it.
    See the step above to learn what each line does, and change it in this code.

CSS Rollover Navigation Example