keep resizing calm pulling elements the enclosing around?

i have following html

          <div id="menu">
            <ul class="horizmenu">
            <li id="active"><a href="#" id="current">about</a></li>
            <li><a href="#">archive</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">item four</a></li>
            <li><a href="#">item five</a></li>
            </ul>
        </div>

and css i have

.horizmenu li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
#menu
{


    text-align:center;
    margin-bottom:10px;
    letter-spacing:7px;
}
#menu a
{
    color:red;

}
#menu a:hover
{
    color:blue;
    font-weight:bold;
}

everything works graceful well, solely i rodent over links, tone changes becomes bold, i want, nonetheless also causes li elements pierce rather following pierce behind mouse-off. there an easy proceed stop happening?