Как включить изображение-разделитель в меню, созданное с помощью ul и li?

Question

Я пытаюсь включить небольшое изображение в качестве разделителя в свое меню, и у меня время моей жизни (сарказм). Для того, чтобы создать меню, как показано ниже, я использую код под изображением.

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

Моя проблема в том, что я не могу добавить небольшое изображение разделителя между элементами li. Есть идеи?

Answer 1

стиль списка воспроизводится в разных браузерах. лучший способ сделать это -

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

псевдо-класс first-child работает не во всех браузерах, поэтому вы можете применить первый класс к первому li и установить для этого фона значение none

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

примечание: вам нужно будет использовать некоторое количество отступов для li, чтобы отодвинуть текст от фонового изображения. Вы можете отрегулировать положение фонового изображения, используя последние два параметра (которые я установил на 0). первая цифра - ось x, а вторая - ось y. чтобы переместить фоновое изображение на 2 пикселя вправо и на 2 пикселя вверх

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