Top Link Menu Style 1

Color Scheme #1 (As what is shown on this page):

Code:

#menu-container{
margin-top:15px;
padding:0px 15px 0 15px;
background-color:none;
border-top:none;
border-bottom:2px solid #151515;
}
ul#topmenu li{
float:left;
background-color:#151515;
}
ul#topmenu li a {
text-decoration:none;
color:#fff;
}
ul#topmenu li a:hover{
background:#151515;color:#ccc;
}

To change the background color, change the value in red:

#menu-container{
margin-top:15px;
padding:0px 15px 0 15px;
background-color:none;
border-top:none;
border-bottom:2px solid #151515;
}

ul#topmenu li{
float:left;
background-color:#151515;
}

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

ul#topmenu li a:hover{
background:#151515;
color:#ccc;
}

Example 2 – Blue:

Produces something like:

The Code:

#menu-container{
margin-top:15px;
padding:0px 15px 0 15px;
background-color:none;
border-top:none;
border-bottom:2px solid #00498C;
}

ul#topmenu li{
float:left;
background-color:#00498C;
}

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

ul#topmenu li a:hover{
background:#0071DC;
color:#fff;
}

Notes/Reference:

CSS that changes the color of the “rectangle boxes”:

ul#topmenu li{
…
background-color:#00498C;
}

CSS that changes the link color:

ul#topmenu li a {
….
color:#fff;
}

CSS that changes the link color when highlighted:

ul#topmenu li a:hover{
…
color:#fff;
}

CSS that changes the color of the rectangle boxes when highlighted:

ul#topmenu li a:hover{
background:#0071DC;
…
}

CSS that determines the spacing (margin) between the menu and the top of the page:

#menu-container{
margin-top:15px;
…}

To change the spacing from the menu to the post body, add:
#menu-container{
margin-bottom:15px;
…}