Can anyone help with my Horizontal Nav Menu CSS in Joomla

Can anyone help me out with trying to create a horizontal navigation menu similar to the one at the very top of this page -http://support.apple.com/kb/HT1451 Im not bothered about the search box, just creating the menu items and css for the images.

I am using Joomla and it giving me some trouble working out how to code the CSS, inparticular how to make the background images to "stretch" when items are added to the menu.

For my attempt at this I have created two background images, one for the left-hand corner, and one long one to stretch across the menu from the left which can be seen here -
http://www.tomsspecialreserve.co.uk/menu_images.html

Joomla outputs this html -

<ul class="menu_toms_navmenu">
<li class="item143"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=12&amp;Itemid=143"><span>test1</span></a></li>
<li class="item144"><a href="/joomla/index.php?option=com_content&amp;view=article&amp;id=13&amp;Itemid=144"><span>test2</span></a></li>
<li class="item145"><a href="/joomla/index.php?option=com_search&amp;view=search&amp;Itemid=145"><span>test3</span></a></li>
</ul>
I cannot work out the CSS to complete the effect. Do I need to use divs as background image wappers?

http://www.calmdesign.co.uk/test/round-cornered-horizontal-menu.php may help

Thankyou for replying. I have had a look at the link and the problem I have with creating that menu in Joomla is I cannot give the first or last menu items my own class names, e.g. class="left_menu_item" as all menu item names are created by Joomla automatically eg class="item143", "item144" etc.

So, if I use a Joomla class name as for a corner image eg "item144", when I add more items to the menu the class names alter, I have to adjust the CSS displaying the corner image to whatever the new last class name is. And its such a pain! I was hoping there may be a way around it.

I haven't tried, but hopefully there's a solution at http://cecilgupta.com/?p=122

Cool, I will have a look at that link and post back later on..

:thumbsup:

Yup that code has worked, I now have first and last items in my menu :thumbsup:

I've used overrides lots of times before, I just didn't think of it in this instance.

You are a genius! Thankyou!