1. Make a copy of global.css to ensure that you do not lose your edits.
2. In global.css, remove all of the Navbar Stuff
3. In its place put the following (thanks to Nancy)
nav {
position: relative;
width: 800px; /**adjust width as needed**/
margin: 0 auto;
padding: 0;
text-align: center;
border: 1px dotted red; /**you may remove this **/
}
nav ul {
margin: 0;
padding: 0
}
nav li {
list-style: none;
font-size: 12px;
float: left;
text-align: center;
}
/**top level menu**/
nav li a {
display: block;
text-decoration: none;
margin-right: 12px; /* space between links */
color: #FFF;
width: 9em; /* adjust as needed or use auto */
padding: 8px;
font-weight: bold;
line-height: 1.50em;
background: #C33;
border: 1px solid #000;
border-top: none;
}
/**top menu style on mouse over - in good browsers**/
nav li:hover > a {
color: #FFF;
background: #333;
}
/**sub-menu**/
nav li ul {
display: none;
text-align: center;
margin: 0;
padding: 0 1em;
background: none;
}
/**sub-menu, help for IE6**/
nav li:hover ul, nav li.hover ul {
display: block;
position: absolute;
padding: 0;
}
nav li:hover li, nav li.hover li { float: none; }
/**drop-menu style**/
nav li:hover li a, nav li.hover li a {
width: 9em; /* adjust width as needed or use auto */
margin-top: 0;
}
/**drop-menu style on mouse over**/
nav li li a:hover {
background: maroon;
color: gold;
}
/* Clear floated elements at the end*/
nav:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Then adjust the values to suit - see comments within the CSS