Preview: what the working site looks like.
Change position of menu by changing the text-align:left/center/right; of the menus containing div. Try the following changes to move it to the right and then pad it in a bit:
ul#menu {
background: #FFC;
margin: 50px 0;
padding: 0 20px 0 0;
text-align: right;
list-style: none;
overflow: hidden;
}
Remove the space between the buttons with a little negative margin and replace it with a different color divider:
ul#menu {
background: #FFC;
margin: 50px 0;
list-style: none;
overflow: hidden;
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
}
#menu li a,
#menu li a:visited {
color: #999;
background: #6C9;
margin: 0 -2px;
padding: 5px 20px;
border-left: 1px solid #f00;
text-decoration: none;
}
<ul id="menu">
<li><a href="#">a long one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li>
<a href="#"style="border-right:1px solid #f00;">
and four is even longer still</a>
</li>
</ul>
The markup
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<ul id="menu">
<li><a href="#">a long one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">and four is even longer still</a></li>
</ul>
<!--container--></div>
</body>
</html>
The CSS
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
#container {
width: 900px;
margin: 10px auto;
background: #666666;
color: #fff;
overflow: auto;
}
ul#menu {
background: #FFC; /*color of menu bar*/
margin: 50px 0; /*just to put a little space around it*/
list-style: none; /*removes the list bullets*/
overflow: hidden; /*hides the extra padding color on a*/
text-align: center; /*the key to positioning the ul*/
}
#menu li {
display: inline; /*in place of float:left/right; This is what makes #menu take on the display:left/center/right;*/
line-height: 25px; /*the key to enclosing li in the ul*/
}
#menu li a,
#menu li a:visited{
color: #999; /*text color*/
background: #6C9; /*button color*/
padding: 5px 20px; /*padding the a adjusts the size of the button, adjust #menu li{line-height:xx} accordingly*/
text-decoration: none; /*removes links underline*/
}
#menu li a:hover { /*hover effects*/
background: #C63;
color: #000;
}