Top Link Menu Style 1
(Note: With the latest version, you don't need this anymore as it has built-in menu option.)
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; …}
or
