CSS Menu Problem

my css for the menu

     ul#menubar {
     width: 800px;
     padding: 27px 10px 5px 10px;
     list-style: none;
     text-align: center;
     }

    ul#menubar li {
 display: inline;
    }
    ul#menubar li a{
 border-right: 1px solid #111111;
 font: 12px "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, san开发者_开发技巧s-serif;
 padding: 5px 10px 8px 10px;
    }

    ul#menubar li a#last {
 border-right: none;
    }

    ul#menubar li a:hover, ul#menubar li a:active{
 background: #8d4d09 url("images/hover.gif") bottom center no-repeat;
 padding-bottom: 8px;
    }

menu html

    <ul id="menubar">
        <li><a href="#" target="_self">Home</a></li>
        <li><a href="#" target="_self">Sale</a></li>
        <li><a href="#" target="_self">Purchase</a></li>
        <li><a href="#" target="_self">Rent</a></li>
        <li><a href="#" target="_self">Developments</a></li>
        <li><a href="#" target="_self">Interior Decorators</a></li>
        <li><a href="#" target="_self">Maps</a></li>
        <li><a id="last" href="#" target="_self">Legal Documents</a></li>
    </ul>

preview

problem is that i cant figure out the space between the border-right and the anchor when the link is hovered.

what is causing this space and how can it be removed.

The hovered effect is shown on "Purchase" link.

the problem is display: inline; - in the source-code you have linebreaks between your li's, wich are represendet as a space on the site (as alwys when you use inline-elements and/or text, see example below).

to avoid this, use float: left; or define your ul/li in one line, without spaces/linebreaks between them.

*example:

this sourcecode:

this
is
text

gives this output:

this is text

(linebreaks/whitespace are converted to 1 space between words (and the li's are "words" in your case))

ul#menubar li {
 display: inline;
 float: left;
}

You are setting padding-bottom: 8px on hover, you already have padding: 5px 10px 8px 10px; applied to the element. Do you need to set the padding-right on hover too as you will still have 10px applied to it?

I'm thinking it could be the browser default style to apply a margin to the left/right of the li. Try setting margins to 0.