I am looking to enhance my menu by adding an image below each li item as a separator. How can I achieve this using CSS? I want the images to automatically appear whenever a new li tag is added to the ul.
Here is the HTML code:
<ul class="menu">
<li>Bookmarks</li>
<li>Something</li>
<li>BUMPER STICKERS</li>
<li>CARBONLESS FORMS</li>
<li>CD JACKETS</li>
<li>DIE CUT/CUSTOM STICKERS</li>
<li>DOOR HANGERS</li>
<li>ENVELOPES</li>
<li>FOLDERS</li>
<li>LETTERHEADS</li>
<li>RECTANGULAR STICKERS</li>
<li>ROUND STICKERS</li>
<li>STATIC CLING</li>
<li>TABLE TENTS</li>
<li>VINYL BANNERS</li>
<li>WINDOW STICKERS</li>
</ul>
CSS styling:
.seperator li {
background-image: url(../Images/Template%20Images/Separator.png);
padding: 1px;
width: 200px;
height: 25px;
position: absolute;
right: 0px;
bottom: 890px;
background-repeat: no-repeat;
display: run-in;
}