Top Link Menu Style 2

(Note: With the latest version, you don't need this anymore as it has built-in menu option added.)

 

Scheme 1 (As what is shown on the page)

 

Here's the Code (you can just copy and paste):

#menu-container{

background-color:#151515;

margin-top:15px;

padding:0px 15px 0 15px;

background-color:none;

border-top:1px solid #ccc;

border-bottom:1px solid #ccc;

}

ul#topmenu li{ float:left; }

ul#topmenu li a {

text-decoration:none; color:#fff;

}

ul#topmenu li a:hover{

background:#fff;

color:#151515;

}

To change the color, just change the values in red:

#menu-container{

background-color:#151515;

margin-top:15px; padding:0px 15px 0 15px;

background-color:none;

border-top:1px solid #ccc;

border-bottom:1px solid #ccc;

}

ul#topmenu li{

float:left;

}

ul#topmenu li a {

text-decoration:none;

color:#fff;

}

ul#topmenu li a:hover{

background:#fff;

color:#151515; }

Example, following code produces something like:

Code:

#menu-container{ background-color:#118AFD; margin-top:15px; padding:0px 15px 0 15px; background-color:none; border-top:1px solid #0179E7; border-bottom:1px solid #0179E7; }

ul#topmenu li{ float:left; }

ul#topmenu li a { text-decoration:none; color:#fff; }

ul#topmenu li a:hover{ background:#014D92; color:#fff; }

Those in red, are the only values changed. CSS that changes the color of the horizontal bar :

#menu-container{

background-color:#118AFD;

…}

CSS that changes the color of the rectangle when highlighted:

ul#topmenu li a:hover{

background:#014D92;

…

}

CSS that changes the color of the links when highlighted:

ul#topmenu li a:hover{

color:#fff;

…

}

CSS that changes the link colors:

ul#topmenu li a {

…

color:#fff;

}

CSS that changes the justification of links (change the value to 'right') to the right:

ul#topmenu li{ float:left; }