HTML list navigation problem with an uneven design

Question

Our designer created a navigation that visually looks like this:

Navigation Bar

The HTML structure of which is:

<ul>
    <li class="first">Home</li>
    <li>Schools</li>
    <li>Scores</li>
    <li>Sports</li>
    <li>Blogs</li>
    <li>Podcasts</li>
    <li class="last">Forums</li>
</ul>

I can't figure out if there's a way to make this so that when I mouse-over, let's say 'Sports', that both the left and right arrow image would change colors to the darker red. Is there a way to do this?

This is my CSS so far, but it only changes the arrow right of the link:

#mainNav ul li{
    float: left;
    background-color: #ed1c24;
    padding: 7px;
    padding-right: 21px;
    background-image: url('/images/red_arrow.png');
    background-repeat: no-repeat;
    background-position: right;
}
    #mainNav ul li.first{
        padding-left: 14px;
    }
    #mainNav ul li a{
        text-decoration: none;
        color: #FFF;
    }
#mainNav ul li:hover{
    background-color: #d5171f;
    background-image: url('/images/red_arrow2.gif');
}

Answer 1

You'll want something like this: http://jsfiddle.net/2xXQC/

Notice specifically the negative margin-left on each list item that causes them to overlap. The image you will need is something like this:

_____
\    \
/____/

Note to self: Seriously brush up on ASCII art skillz

Except the first. Do note however which anchor gets selected when the cursor hovers. HTML elements are always rectangular, so there's no way you can get the hit area to form the shape of the arrow.