Hovers On Inline Styles?

Morning All

I've been working on the horizontal menu on the following page.

http://www.ja.net/temp/Project/assets/index.html

I have a background image that runs off the 'ul a' tag, here's the css.
<style>
.nav ul a {
padding: 0 5.4em;
line-height: 1.8em;
text-decoration: none;
float: left;
display: block;
color: #e7e3d9;
border: none;
background: url(nav-bg.gif) no-repeat bottom right;
}
</style>

I do not want the image to appear on the last item on the right hand side, so I've added an inline style.

The html looks like this
<style>
<div class="nav">
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Developments</a></li>
<li style="font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight:bold; background:none;"><li
><a href="#" style="padding: 0 5.4em;
line-height: 1.8em;
background:none;
text-decoration: none;
float: left;
display: block;
color: #e7e3d9;
border: none;
">Technologies</a></li>
</ul>
</div>
</style>

However, in doing so, the hover css is no longer applied. I've played around with creating a second style for this li item, and adding the hover stylings to the inline li item, but nothing seems to have worked.

Does anyone have any ideas? Basically, I want a hover to appear on the final sub nav item, but not the background image

Thanks very much for any help, its greatly appreciated
durdledoor

<li><a href="#" style="background-image:none;">Technologies</a></li>

Thanks a lot mate, that has done the job, was a really simple solution in the end!