Горизонтальная линия (разделитель в вертикальном меню)

[dsasda]

Здравствуйте! У меня проблема и заключается она вот в чём.
есть меню, допустим такое(без стилей):

• яблоко
• арбуз
• дыня
• камень

Я хочу разделить их горизонтальной линией (картинкой) - Создал картинку 2х2. И думал использовать <hr>, но вот печаль, если в CSS писать этот нубо-код:
 

hr {background: url(img/hr.png);width: 150px;}

, то это не работает так как мне надо. Что бы было более понятно, то я сделал градиентную картинку.(вехний слой цвета белого(например), нижний чёрный).

Ну и как мне реализовать Разделитель картинкой ?)
 

[hypnocolor]

Обязательно картинкой?

Можно так — http://jsfiddle.net/hypnocolor/mk8YX/

[dsasda]

Обязательно картинкой?

Можно так — http://jsfiddle.net/hypnocolor/mk8YX/

Без картинки я просто не знаю как. Если представить, что это картинка высотой в 2px, то выгледит она у меня так:

верхний слой

нижний слой

Такой разделитель я хотел бы сделать. Можно, конечно, самое бональное это добавлять, скажем, новый DIV после каждого пункта меню, но я ищу более разумный способ)

P.S. Вот пример с моего нубо-дизайна, но как это выглядит на картинке:

http://i33.fastpic.ru/big/2014/0121/11/d4cf3d03ab3385cb8b6274453ee75911.jpg

Edited January 21, 2014 by dsasda

[Great Rash]

Для начала расскажите в каких браузерах нужна работоспособность?

[hypnocolor]

http://jsfiddle.net/hypnocolor/mk8YX/5/

[dsasda]

http://jsfiddle.net/hypnocolor/mk8YX/5/

Спасибо, отлично работает, немного позже постараюсь разобраться в этом коде и понять что и как.

А что касается браузера, то, конечно, желательно кроссбраузерную версию, но это уже идеал, по этому мне важно, чтоб работало в лисичке и в хроме, ведь, если не ошибаюсь, то это наиболее популярные браузеры. (Намеренно не упомянул оперу )