To create horizontal tabs from a unordered list, you can style your list as follows:

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
display: inline;
}

The above creates the horizontal list without bullet points. The below will set the height of the bar and synchronizes the height of the list with the height of the bar.


div#with_id_containing_my_list {
height: 35px;
}
li {
line-height: 35px; /* this vertical aligns the text of the li */
padding-top: 10px; /* this pushes the top of the listitem to the top of the bar */
padding-bottom: 9px; /* this pushes the bottom of the listitem to the bottom of the bar */
}

To set distinct background colors for the default tab and the hovered tab, set the style below.

li {
background-color: red;
}
li:hover {
background-color: orange;
}

The remaining trick is get the whitespace removed between the list items. When you set the display:inline; property the list items are treated as words with whitespace. On the UL tag you can set the font-size to 0px and restore the font-size on the LI to the size you prefer, e.g. 14px;

ul {
font-size: 0px;
}
li {
font-size: 14px;
}

Then create a tab separator by using the margin-right, to keep the left most tab aligned with the left side of your bar. Set the left and right padding to create some space between the tab text and the tab borders.

li {
margin-right: 2px;
padding-left: 20px;
padding-right: 20px;
}