CSS :: Creating a menu :: Part II :: Changing the Code
<style type="text/css">

.hovermenu ul{
font: bold 9px verdana;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{

padding: 2px 0.5em;

text-decoration: none;

float: left;

color: #3D7162;

background-color: #ADC9C3;

border: 1px solid #ffffff;
}

.hovermenu ul li a:hover{
background-color: #C6CFA8;
border-style: outset;
}

/* Apply mousedown effect to Non IE browsers*/
body.hovermenu ul li a:active{
    border-style: inset;
}
</style>

Sets the font style and size - remember to use only those fonts common to all computers.
The amount of space between the text and the edge of the 'box'.
Change none to underline if you want the menu links to have an underline.
Color of the Link text
This is  the background color behind the Links
Border color and size surrounding the Link boxes
Color the background will change to on mouseover.
Common Fonts
Tutorial Submitted by :: sj enterprises
Copy the code below to create the menu shown above.

For the purposes of this tutorial only, basic changes are shown and are designated in blue.
  • Paste into a text editor such as Note Pad - Do not use Word or Works or similar programs as they can add extra formatting.
  • Make your changes to font, background color, padding, etc.
  • Save As a .css file. You will use this file to make future changes to your navigation so save it in a memorable place on your computer.
  • Import or drag the file into the File Manager in SiteBuilder and publish.
Copyright 2006 - Homestead Connection - All Rights Reserved
Homestead Website Design and SEO - S&J Enterprises
Use the internal search feature to the right or the site map for easy access to information.
Home     Tools    FAQs     Web Design    Tips     Tutorials    Forum    Contact    Site  Map
Guides to using the Tools in the SiteBuilder program
Frequently asked questions about using Site Builder software
Homestead website design guides
Enhance the Homestead website with these tips
Tutorials to help Homestead users with creating their website
Homestead Connection Site Map and Search function
Homestead website design guides
Enhance the Homestead website with these tips
Tutorials to help Homestead users with creating their website