How to include a separator image in a menu created using ul and li?

Question

I am trying to include a small image as a separator in my menu, and I have the time of my life (sarcasm). In order to create a menu as shown below, I use the code below 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 cannot add a small separator image between li elements. Any ideas?

Answer 1

list style is played in different browsers. the best way to do this is

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

the first-child class pseudo-class does not work in all browsers, so you can apply the "first" class to the first li and set the background to none

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

: , . , ( 0). x, - y. 2px 2px

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

Answer 2

, :

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;
}