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

I'd be willing to bet that the background image for each list item only has a right arrow.

Using Css, you're only affecting the background image that you're actually hovering over.

If you use javascript (or jquery) for this (onHover), you'll have access to an onHover "event", within which you'll be able to affect anything else on the page, not just the image you're hovering over. In that case, you'll be wanting to swap the image you're hovering over, as well as the one to the left of it.

Answer 2

If your red_arrow.png and red_arrow2.gif have both arrows you may be able to mess around with z-index, but it's going to require a lot tweaking to get everything lined up properly.

You are probably better of using a css sprite and fine tuning the hover position in css.

Check link text for some good tutorials and ideas.

Answer 3

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.

Answer 4

You don't have to use javascript. CSS Sprites get the job done for mouseovers. Here is a good article:

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

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

EDIT: I see the problem. You need to do BOTH arrows. But you can still do this with CSS, just increase the z-index for the hover states (You'll need to have your sprite include both the left and right arrows):

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

Answer 5

Just make the hover image have both arrows in one image, then position it so it covers both arrows.