Here is an example of it.  Just hover over Home at the top...
http://www.beanstalkmedia.net/DotNetSite/


-----Original Message-----
From: [email protected] [mailto:[EMAIL PROTECTED]
On Behalf Of Travis D. Falls
Sent: Saturday, December 09, 2006 3:26 PM
To: [email protected]
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]
*******************************************************************






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

Reply via email to