Horizontal Navigation with right side bulltet - Having Problem in Hover li

HTML & CSS
1

Dear All,

I am facing problem in this navigation when my cursor goes to right side navigation my text of the <a> tag is not coming, please help me out…

HTML:

<div id=“Header_nav”>
<div class=“nav_container”>
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#” >Products</a></li>
<li><a href=“#”>Apps</a></li>
<li><a href=“#”>Services</a></li>
<li><a href=“#”>Explore</a></li>
<li><a href=“#”>About</a></li>
<li><a href=“#”>Contacts</a></li>
</ul>
</div>
</div>

css:

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

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

.nav_container ul {list-style-type:none; margin:0 0 0 97px; padding:0; overflow:hidden;}
.nav_container li
{float:left; margin:0 0px 0 0px; background:transparent url(header_nav_bullet.png) no-repeat; background-position:right; margin:0 12px 0 0px;}

.nav_container li:hover
{background:transparent url(header_nav_bullet_selected.png) no-repeat;background-position:right; background-color:#333;}

.nav_container ul li a
{display:block; text-decoration:none; padding:17px 16px 0px 10px; height:33px; font-family:Arial; font-size:15px; font-weight:bold; color:#333; text-transform:capitalize; border-right:0px solid #000; margin-right:5px;}

.nav_container ul li a:hover{color:#fff;}

2

HI,

You have a 5px margin-right on the anchor so there will be 5px of dead space to the right of the anchor where you will lose focus on the anchor. Remove the margin from the anchor and apply it to the parent list element instead.

However, you would be better off applying the image and hover effect to the anchor instead and thus support all older browers also.


#Header_nav {
	height:50px;
	margin:0;
	background-size:100% 100%;
	border-bottom:1px solid #e2e2e2;
	background-color:#f7f7f7;
}
.nav_container {
	width:1200px;
	margin:0 auto;
	padding:0;
}
.nav_container ul {
	list-style-type:none;
	margin:0 0 0 97px;
	padding:0;
	overflow:hidden;
}
.nav_container li {
	float:left;
	margin:0 0px 0 0px;
	margin:0 12px 0 0px;
}
.nav_container ul li a {
	[B]background:url(header_nav_bullet.png) no-repeat 100% 0;[/B]
	display:block;
	text-decoration:none;
	padding:17px 16px 0px 10px;
	height:33px;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	color:#333;
	text-transform:capitalize;
	border-right:0px solid #000;
	margin-right:5px;
}
.nav_container ul li a:hover {
	color:#fff;
	[B]background:#333 url(header_nav_bullet_selected.png) no-repeat 100% 0;[/B]
}
3

Dear Paul,

I want 5px margin in between my <a> tag and arrow, if i am removing 5px margin-right then it’s coming together…

plz. help.

thanx.

4

Just increase the right padding of the anchor by 5px more instead. The bullet image is in the background anyway so margins don’t really come into play here unless you are trying to do something less obvious than I expected.

5

you 2 good man…
Thanx a lot…