Tutorials > CSS > Large Button Menu
In this article learn how to create large button-like tabs for your navigational purposes with CSS and some clever code.
Starting Out
Note: In the examples I have used black and white backgrounds to show you the effects some css code has.
Before we begin, create your navigation in a div as an Unordered List to keep things simple.
<div id="navigation">
<ul>
<li><a title="Item" href="#">Item</a></li>
<li><a title="Item" href="#">Item</a></li>
<li><a title="Item" href="#">Item</a></li>
<li><a title="Item" href="#">Item</a></li>
<li><a title="Item" href="#">Item</a></li>
</ul>
</div>
Dealing with the List
Our first priority is dealing with the format and structure of the list. Let's clear all the margin and padding that browsers give the list to start with, while removing the list item bullets.
#navigation ul {
margin: 0;
width: 150px;
font: bold 10px Verdana;
list-style: none;
}
#navigation ul li {
margin: 0;
padding: 0;
text-align: right;
}
The Link
Since we want a large area to click on, we will have to make the a element big rather than the list item (li) itself. Making it a block element instead of the default inline allows us to specify height.
#navigation ul li a {
display: block;
width: 150px;
height: 25px;
line-height: 25px;
}
