css - horizontal menu - background-color

Question

I have a horizontal menu. I want to have a border around the menu (not the entire-row, only the space menu is covering). When I put border on ul, it covers the entire row, when I put border on li, it has border between menu items as well.

<ul id="menu" style = "text-align:left;">  

                    <li>...anchor stuff...
                    </li><li>...anchor stuff...
                    </li><li>...anchor stuff...
                    </li><li>...anchor stuff...
                    </li><li>...anchor stuff...</li>
                </ul>

Here is the CSS:

ul#menu
{
    padding: 0 0 0px;
    position: relative;
    margin: 0 0 0;
    text-align: right;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul#menu li
{
    display: inline;
    list-style: none;
}


ul#menu li a
{
    padding: 0px 0px;
    margin-right:20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
}

Answer 1

Declare ul with display:inline-block. It'll cause ul to take only space necessary to display its contents, not 100% of it.

An example

Answer 2

Use display: inline-block on the ul and add the border to the ul.

Answer 3

If you need IE6 compatibility:

#menu li {
    border-top: 1px solid #000;
    border-bottom: 1px solid #00;
    }

You might be able to use li:first-child (I can't remember, and don't have a copy of IE6 to test with) to apply:

#menu li:first-child {
    border-left: 1px solid #000;
    }

But you'll likely have to add either a class-name, or id, to the first and last li elements to give them the appropriate border-left and border-right.

Answer 4

Kill display: inline on the list items and float them left instead. Float the container as well, which will ensure that it's only as wiide as its contents. Finally, set overflow: hidden on the ul.