Tab menu using lists and CSS
Here’s a simple way of creating a tab menu using unordered lists and CSS.
First you will need your menu items in a list, preferably unordered, but ordered will work as well. Give the list an id, for example, “tabmenu”.
<ul id="tabmenu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
Next, define your tabmenu id either in the head section of your html or in an external CSS stylesheet. You will need to set the display to inline, the list-style-type as none and padding on the right to about 20px.
#tabmenu li {
display: inline;
list-style-type: none;
padding-right: 20px;
}
Here’s what the above example looks like:
June 1st, 2006 at 7:07 am
The other way to achieve a tabbed menu using html lists is to use float:left on the li.
#tabmenu li {
float:left;
}
By using float:left, you preserve the block display of <li> which is useful for defining width and height.
display:inline doesn’t allow width and height to be defined.