[WSG] Horizontal Menu Issue

[Travis D. Falls]

I have a horizontal menu that I am trying to create.  I am having trouble
though.  Everything is working correctly except when I hover over the link
the image which is just s lighter version of the BreadCrumbBar goes all the
way across... I want it to be as wide as the word + 8px padding.  How can I
do this?



#BreadCrumbBar{
        background-image:url("images/BreadCrumbBar.jpg");
        background-repeat:repeat-x;
        height:31px;
        width:100%;
}

#HorMenu{
        list-style-type:none;
        display:inline-block;
        margin-left:10px;
}

#HorMenu li{
}

#HorMenu li a{
        display:block;  
        height:31px;
        padding-top:3px;
        padding-left:8px;
        padding-right:8px;
}

#HorMenu li a:hover{
        background-image:url("images/BreadCrumbBarActive.jpg");
        background-repeat:repeat-x;
        height:31px;
}



<div id="BreadCrumbBar">
      <ul id="HorMenu">
        <li><a href="Default.aspx">Home</a></li>
        </ul>
</div>






*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************