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”>
<ul>
<li><a href="" style="text-decoration:underline;" >Home</a></li>
<li><a href="" >Products</a></li>
<li><a href="">Apps</a></li>
<li><a href="">Explore</a></li>
<li><a href="">About</a></li>
<li><a href="">Groups</a></li>
</ul>
</div>
</div>
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;}