CSS Horizontal Navigation with Right Image

Dear All,

I am new bie and m trying Horizontal Navigation Bar, and i m confused in margin and padding in my Navigation bar,
I want to my navigation bar just like attached image, please help me out how I can set my width in between each li with right arrow attached is the image of bullet.

HTML

<div id=“Header_nav”>
<div class=“nav_container”>

	  	   &lt;ul&gt;
		   &lt;li&gt;&lt;a href="" style="text-decoration:underline;" &gt;Home&lt;/a&gt;&lt;/li&gt;
		   &lt;li&gt;&lt;a href="" &gt;Products&lt;/a&gt;&lt;/li&gt;
		   &lt;li&gt;&lt;a href=""&gt;Apps&lt;/a&gt;&lt;/li&gt;
		   &lt;li&gt;&lt;a href=""&gt;Explore&lt;/a&gt;&lt;/li&gt;
		   &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
		   &lt;li&gt;&lt;a href=""&gt;Groups&lt;/a&gt;&lt;/li&gt;
		
		   &lt;/ul&gt;
		
	
	  &lt;/div&gt;

 &lt;/div&gt;		

CSS:

#Header_nav {

width:100%;
height:59px;
margin:0;
background-size:100% 100%;
border-bottom:1px solid #e2e2e2;
background-color:#f7f7f7;
}

.nav_container{width:1200px;
margin:auto;
padding:20px 0 0 97px;

}

.nav_container ul{padding:0; margin:0;}
.nav_container ul li {list-style:none; display:inline-block; background-image:url(‘header_nav_bullet.png’); background-repeat:no-repeat; background-position:right; margin:auto;}

.nav_container ul li a {color:#333; font-size:15px; text-decoration:none; display:block; margin:0 0 0 20px; font-weight:bold; padding:0px;}

.a_underline{text-decoration:underline; color:#333;}

Well… let’s see… you have two DIV around it for no good reason, you’re applying list-style to the wrong element, you’re attempting to use inline-block on a element that IE can’t do that to, inline-blocks are like normal words so whitespace between them means there’s a space between them which is why if you need them flush typically floats are used (though there are workarounds, none of them are particularly reliable).

I’d have to see the full page to weigh in more, but I suspect from what I’m seeing that there’s lo legitimate reason for that to be more than just the UL.

Though I also suspect that much of your problem is the lack of an extra element to apply that down-arrow to… since the text is dynamic width an you want the anchor (which is where MOST of your dynamic style belongs). I’d toss a sandbag span into the anchor and use that to make the image… I’d move half of what you have on LI into the anchor, and half of it into the parent list,

But again with the tiny code snippets and without seeing the rest of the layout, we’re left guessing wildly as to what it is you are trying to accomplish… though that 1200px fires off a massive flare saying “broken/inaccessible layout” and/or “not viable design concept” since a massive fixed width pretty much throws the notion of accessibility out the window.