Irregularly Designed HTML List Navigation Issue

Question

Our designer created a navigation that visually looks like this:

Navigation bar

HTML structure:

<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 understand if there is a way to do this so that when I click on the mouse, say “Sport”, the image in the left and right arrows will change colors to a darker red color. Is there any way to do this?

This is my CSS so far, but it only changes the arrow to the 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 need something like this: http://jsfiddle.net/2xXQC/

margin-left , . , , :

_____
\    \
/____/

Note to self: Seriously brush up on ASCII art skillz

. , . HTML , , .

Answer 2

, , , .

Answer 3

, .

Css, , .

javascript ( jquery) (onHover), onHover, - , , re reovering. , , .

Answer 4

red_arrow.png red_arrow2.gif , z-index, , .

, css- css.

.

Answer 5

javascript. CSS Sprites . :

http://www.dave-woods.co.uk/index.php/mouseover-images-using-css-sprites/

Here is this technique in action: http://www.rackspace.com/apps

EDIT: I see a problem. You need to make BIG arrows. But you can still do it with CSS, just increase the z-index for the hover states (you need your sprite to include left and right arrows):

a: hover {background-position: 0 40px; z-index: 10; }