The problem is that the <li> is a block-level element, so it's default with will be 100% of it's parent -- the entire bar in this case.
If you set a width on the <li> (and/or the <a> inside it) you should get your desired effect. ~ Tim tjameswhite.com ----- Original Message ---- From: Travis D. Falls <[EMAIL PROTECTED]> To: [email protected] Sent: Saturday, December 9, 2006 3:26:19 PM Subject: [WSG] Horizontal Menu Issue 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] ******************************************************************* ____________________________________________________________________________________ Yahoo! Music Unlimited Access over 1 million songs. http://music.yahoo.com/unlimited ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
