Tab menu overlaps

I made a CSS menu but the individual tabs, or rather a row of tabs, seems to be overlapping each other. I used white-space: pre-wrap with a width on the tab menu itself:

html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 620px !important;
}

#header #header-bottom-left .tabmenu li {
开发者_运维知识库font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
padding: 5px;
margin-right: 16px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
white-space: pre-wrap;
margin-bottom: 20px;
}

In general, don't style the LI for menus, style the A tag and use display:block or inline-block

not sure if this is what you want but I think you may be missing a float: left in your li

code: http://jsfiddle.net/vT5vd/

BTW lists are fantastic for menus and are used so almost exclusively!

The tabs are treated just like a line of text. The line spacing is set to the height of the text, causing the larger tabs to overlap. To correct this just add a line-height: 1.8; line to the css file in the tabs list item section. Also. you can put a break or paragraph tag in the list of tabs to control where they wrap to the next line and avoid splitting a tab.

ul.tabs li a
{
    font: normal 18px Verdana;
    line-height: 1.8;
    text-decoration: none;
    position: relative;
    padding: 0px 8px;
    border: 1px solid #CCC;
    border-bottom-color:#AAA;
    color: #000;
    background: #F0F0F0 url(tabbg.gif) repeat-x 0 0;
    border-radius: 2px 2px 0 0;
    outline:none;
}