Trapezium navigation menu mouse interaction - css

Question

I have designed a navigation menu which uses trapeziums instead of rectangles. I have got something working but it doesn't behave properly. I have tried using a negative left margin of -15px to offset the link but this doesn't appear to work.
The following illustration demonstrates what I have working along with that desired. Given the same cursor position "Brokerage" should be highlighted instead of "Services" (with hover or click).
How can I fix this? Is there a better way to achieve this (baring in mind that I want compatibility with IE7+)
Here is the HTML structure of the navigation menu:
<nav>
<ul>
<li>Contact</li>
<li>Brokerage</li>
<li>Services</li>
<li class="first current">Home</li>
</ul>
</nav>
Here is the CSS:
nav ul li {
display: block;
float: right;
margin-left: -30px;
line-height: 69px;
text-align: center;
font-size: 16pt;
background: url(img/nav.png) no-repeat right -69px;
}
nav ul li:hover {
background: url(img/nav.png) no-repeat right -207px;
}
nav ul li.current {
background: url(img/nav.png) no-repeat right 0px;
}
nav ul li.current:hover {
background: url(img/nav.png) no-repeat right -138px;
}
nav ul li.first a {
background: url(img/nav.png) no-repeat left bottom;
}
nav ul li a {
display: block;
float: left;
padding: 0 26pt;
text-decoration: none !important;
color: #4e649f;
}
nav ul li:hover a {
color: #9e4e4e !important;
}
nav ul li.current a {
color: #fff !important;
}
Here is the img/nav.png image, please note that bottom strip of image contains a white triangle that is used to cover start of first navigation item.
^-----^ White triangle here - remainder is transparent (PNG-24)

Answer 1

I think that there are at least three solutions of which two use javascript:
Imagemap + hover event
You could use a transparent imagemap that lies over the navigation and use the href attribute on the area tags. The areas could be trapezoids like your navigation items.
RaphaelJS
You could use RaphaelJS to draw shapes over the navigation and bind to mouseover/click events.
Plain Javascript
You could just calculate the position of the cursor and trigger the appropriate link with plain javascript.