Question

Anyone know if it’s possible for a li background image to extend over the parent ul width?

Here is my css.

.sideNavigation {
    position: relative;
    background: url(images/sidebarBorderRight.png) top right no-repeat;
}

.sideNavigation li {
    position: relative;
    margin: 0;
    width: 225px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #DDD;
    font-size: 12px;
}

.sideNavigation li.active {
    position: relative;
    height: 44px;
    line-height: 44px;
    background: url(images/subnavActive.png) no-repeat;
}

and an example html

<ul class="sideNavigation">
    <li class="active"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

I’d like the li.active background to display over the ul width while keeping the other li elements to their current width.

Answer 1

Yes, it’s possible.

Just give a fixed size to the ul and larger dimensions to the li, and possibly set display: block for the li and you should be all set. You can also play with negative margins alternatively.