Als dat werkelijk ook de HTML is voor je menu zou ik even overnieuw beginnen. We beschouwen een menu namelijk als een lijst in HTML. Dat houd dus in dat je ongeordende lijst nodig heb en het link element van HTML.
Een menu zou er dan zo uitzien in HTML. Vervolgens kun je dan met CMS hier een horizontale of verticale balk van maken zoals je wellicht al uitgevonden had. In die balk kun je dan de knoppen opmaken.
Bijvoorbeeld:
.menu {
width: 500px;
height: 50px;
list-style: none;
margin: 20px auto 0 auto;
background-color: blue;
}
.menu li {
margin: 0;
padding: 0;
float: left;
}
.menu li a {
width: 70px;
height: 50px;
float: left;
color: #FFF;
text-align: center;
line-height: 50px;
}
.menu li a:hover {
color: #000;
background-color: grey;
}
De regel line-height zorgt er in dit geval voor dat de tekst, stad en drop ook horizontaal in het midden van de knop zitten. Dat is een handige truc hiervoor. Mocht je echter grote dingen horizontaal in het midden uit willen lijnen, dan heb je wel wat anders nodig.
Als je googled op "verticaal uitlijnen" of "tekst verticaal uitlijnen" kom je nog veel meer dingen tegen, waaronder dus ook wat ik hierboven geplaatst heb.
