CODEWITHSUNDEEP
cssnavigation
Pretendo
Pretendo

Reputation: 29

Get rid of an extra empty space on the right side of the navigation bar

a newb here looking to solve a css problem with my navigation bar.

There is an extra empty space on the right side that should not be there. I would like the li elements to fill the nav bar completely with all properties intact.

Can you please help and see what in my css code is the culprit?

Thank you 

#nav {
	

     	height: 46px;
}

#nav > li {
	float: left;
	
	padding: 14px 29px 10px 29px;
	
	border-right:1px solid #eae5e4;
	border-left:1px solid #ffffff;
}
#nav > li a {
	color: #7d8184;
	font-size: 15px;
}
#nav > li:last-child { border-right:none; }
#nav > li.over, #nav > li:hover, #nav > li.active {
	
	border-bottom:5px solid #f15a3b;
}
#nav > li > a > span {
	
}
#nav > li.over.parent {
}
#nav .homelink {
	
}
#nav .custommenuitem {
	border-left:1px solid #eae5e4;
	border-right:none;
	display:none;
}

#nav li.block_li > a > span, #nav li.block_li > a {
	cursor: default;
}
#nav li div.custom_menu_item {
	position: absolute;
	padding: 15px;
	z-index: 1500;
	width: 980px;
	margin-left: -1px;
	border: 1px solid #EAE5E4;
	top:45px;
}

Upvotes: 1

Views: 719

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

divide 100% by the number of drop downs you have then insert that width pecentage here like this 

#nav > li {
float: left;
width: 25%; /* if you had 4 dropdowns*/
padding: 14px 29px 10px 29px;

border-right:1px solid #eae5e4;
border-left:1px solid #ffffff;}

Upvotes: 1

Related Questions