We kunnen het basismenu aanpassen zodat de linken naast elkaar komen te staan. We krijgen dan een menubalk.
<div id="menubalk">
<ul>
<li><a href="/onderwerp1/index.html">Onderwerp 1</a></li>
<li><a href="/onderwerp2/index.html">Onderwerp 2</a></li>
<li><a href="mailto:webmaster%40mijnsite.nl">Contact</a></li>
</ul>
</div>
De div menubalk wordt eerst geplaatst op de pagina. De breedte is voor een scherm van 1280 pixels breed en houd rekening met een scrolbalk aan de rechterkant als de pagina te lang wordt voor het scherm. De hoogte is de ruimte die we gaan gebruiken voor de menubalkknoppen. De standaardplaats is onder de pagina kop.
Met margin: 0 auto zorgen we dat de menubalk gecentreed op het scherm komt, dus ook op schermen die breder zijn. Je gebruikt dit als je je site gecentreerd wilt tonen zoals deze site.
#menubalk {
width:1253px;
height:25px;
margin:0 auto;
padding:0px;
background-color:#ff0;
z-index: 5;}
#menubalk a {
background:inherit;
color:#00f;
font-weight:bold;
display:block;
padding:0 5px}
#menubalk a:hover {
background:#00f;
color:#fff}
#menubalk ul {
list-style:none;
margin:0;
padding:0}
De volgende code draagt zorg voor het naast elkaar komen te staan en de breedte en hoogte van de knoppen.
#menubalk ul li {
position:relative;
float:left;
width:150px;
line-height:25px}
#menubalk li a {
text-decoration:none;
margin-right:2px;}