adding style image in cutom menu wordpress

Question

I am a beginner to wordpress and creating my first theme. I am stuck at one place. In my static html, i used images in lists to style my navigation. I am able to make dynamic navigation in wordpress but i am unable to work out for putting my images in li dynamically.

My static code for navigation is here

    <ul>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Home</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">About</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Archives</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Write for Us</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Sitemap</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
      <li class="li_txt"><a href="#">Contact</a></li>
      <li class="li_img"><img src="imgs/line-img.png" /></li>
    </ul>

How can i get the alternative of this dynamically

   <li class="li_img"><img src="imgs/line-img.png" /></li>

Answer 1

If you can, I would avoid styling menu items this way. Having a separate li for a border/separator image defeats the purpose of the HTML/CSS relationship. Could you apply the line-img.png to the background of the li element?

Are you using wp_nav_menu() for the menu? It should generate code similar to:

<ul class="menu">
    <li id="menu-item-1" class="menu-item">Menu Item</li>
</ul>

You could could style the above with something like:

.menu-item {
    background: url(imgs/line-img.png) no-repeat right center;
}