Is there a way to add a border-bottom-image (such as an arrow with 159px width) without affecting the width of the <li> element?
I'm facing an issue where setting the width of the <li> to 159px causes layout problems with other elements. Are there any clever tricks to achieve the desired border image effect without disrupting the rest of the design?
lg cgee
Current styling for <li>:
.sub_menu ul li {
float: left;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
height: 41px;
margin-right: 20px;
margin-top: 10px;
}
Styling for the active element:
.sub_menu ul .active {
background-image: url("../images/sub_menu_border_active.png");
background-position: center 17px;
background-repeat: no-repeat;
position: relative;
z-index: 100;
}