How to include a separator image on a menu built with ul and li?

Question

I am trying to include a small image as a separator in my menu and I am having the time of my life (sarcasm). In order to create a menu like below I am using the code under the image.

<ul id="div-menu">
    <li class="current">
        <div class="menu-fill fill">
            <div class="menu-left left">
                <div class="menu-right right">
                    <a href="#" title="Home">Home</a>
        </div></div></div>
    </li>
    <li>
        <div class="menu-fill">
            <div class="menu-left">
                <div class="menu-right">
                    <a href="#" title="About Us">About Us</a>
        </div></div></div>  
    </li>

My problem is that I am not able to add the little separator image between the li elements. Any ideas?

Answer 1

Maybe you could set the separator image as the list image:

ul#div-menu li
{
    list-style-image: url("/images/separator.gif");
}

ul#div-menu li:first-child /* Disable for the first li */
{
    list-style: none;
}

Answer 2

list-style plays up on different browsers. the best way to do it is

ul#div-menu li { background: url(/images/seperator.gif) no repeat 0 0; }

the first-child pseudo-class doesn't work on all browsers, so you can apply a 'first' class to the first li and set background to none for that

ul#div-menu .first { background: none; }

note: you will need to use some amount of padding on the li to push the text away from the background image. you can adjust the position of the background image using the last two parameters (which i've set to 0). the first digit is x-axis and the second one is y-axis. so to move the background image 2px to the right and 2px up

ul#div-menu li { background: url(/images/seperator.gif) no repeat 2px -2px; }