menu2

Menu 2 - Demo

Step 1

Put this code on the page where you want the menu to show.

Change the URL's to point to your sites pages

The <li> "selected" class shows the active page.

To remove the line under the menu delete the last line of code.

Step 2

Put the code below in a html widget at the top of your page.

I have left /*notes*/ on the lines you can edit.

You can change the colours to anything you like.

Use something like colorzilla to match the menu colour to your sites colours.

.css3bylee {
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.css3bylee ul{
font: bold 13px Arial; /*FONT SIZE AND FAMILY*/
margin: 0;
padding: 0;
list-style: none;
}

.css3bylee li{
display: inline;
margin: 0 0 0 0;
padding: 0;
text-transform: uppercase; /*REMOVE THIS LINE IF YOU NEED LOWER CASE TEXT*/
width: 100%;
overflow: hidden;
}
 
 .css3bylee a{
float: left;
color: #ffffff;
background: #3b5998; /*BACKGROUND COLOUR OF TABS*/
margin: 0 5px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
-moz-border-radius-topleft:  4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
border: 1px solid #CCCCCC;
border-width: 1px 1px 0px 1px;
}

.css3bylee a span{
float: left;
display: block;
background: transparent;
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.css3bylee a span{
float: none;
}

.css3bylee a:hover, .css3bylee li.selected a{
font: 13px Arial;
font-weight: 900;
background-color: #ffffff; /*MENU BACKGROUND COLOUR*/
color: #3b5998; /*TAB TEXT COLOUR ON MOUSEOVER AND THE SELECTED TAB*/
-moz-border-radius-topleft:  4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
border: 1px solid #CCCCCC;
border-width: 1px 1px 0px 1px;
}

.css3bylee a:hover span{
background-color: transparent;
}

.css3byleeline
{
width: 100%;
height: 1px;
background-color: #CCCCCC;
}

</style>

Make a Free Website with Yola.