Simple CSS Nav Bar Border Problem

HTML & CSS
1

Hi guys n girls,

I am trying to create a simple css navigation menu with an orange border to the right of each LI (except the last one).

The normal state of the links is background white with grey text and an orange border on the right hand side (but not the full height of the link).

However when in hover state I want the whole LI to have a background of orange, so much so that you cannot see the right hand side border anymore.

The problem I am facing is that when you hover over a link the background changes from white to orange but i can still see the 1px orange border sticking out to the right by 1px.

What I want to achieve is for the border to disappear once the mouse is over the link.

I hope that makes sense. Here is my code, apologies if its a bit messy as Ive been trying lots of different things to try to get this to work properly.

<div class="div1">
  <ul>
    <li><a href="#" class="selected">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
   	<li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</div>

.div1 {
	height: 73px;
	background-color: #FFF;
	margin-top: -19px;
	
}
.div1 ul li {
	float: left;
	list-style-type: none;
}
.div1 ul li a {
	color: #999;
	background-color: #FFF;
	text-decoration: none;
	display: block;
	height: 73px;
	width: 130px;
	text-align: center;
	line-height: 73px;
}

.div1 ul li a:hover {
	background-color: #ff6600;
	color: #FFF;
}

.div1 ul li .selected {
	background-color: #ff6600;
	color: #FFF;
}

If you need a better idea of what I am trying to do, it is something like the navigation on this website: http://www.kompakt.cz/

Thank you very much for anyone that can help.

2

The key is to give each list item a negative left margin of 1px so that they overlap each other:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.div1 {
	height: 73px;
	background-color: #FFF;
	margin-top: -19px;
 
}
.div1 ul li {
	float: left;
	list-style-type: none;
	background: url(http://www.kompakt.cz/images/menu_a.gif) no-repeat 100% center;
	margin-left: -1px;
}

.div1 ul li:last-child {
	background: none;
}
.div1 ul li a {
	color: #999;
	text-decoration: none;
	display: block;
	height: 73px;
	width: 130px;
	text-align: center;
	line-height: 73px;
}
 
.div1 ul li a:hover {
	background-color: #ff6600;
	color: #FFF;
}
 
.div1 ul li .selected {
	background-color: #ff6600;
	color: #FFF;
}

</style>
</head>
<body>

<div class="div1">
  <ul>
    <li><a href="#" class="selected">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
   	<li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</div>

</body>
</html>
3

Yep… that done the trick!

Thank you.

4

You’re welcome. :slight_smile: