I've got a horizontal site nav and the nav items are separated with a 1px border-right.
HTML Code:
<ul class="sitenav">
	<li id=""><a href="" id="">One</a></li>
	<li id="" class="current"><a href="" id="">Two</a></li>
	<li id=""><a href="" id="">Three</a></li>
	<li id=""><a href="" id="">Four</a></li>
	<li id=""><a href="" id="">Five</a></li>
	<li id=""><a href="" id="">Six</a></li>
When I hover over a nav item I want the border to be the same colour as background colour of the hovered nav item. This is easy to do with the hover's border-right (through css), but I would also have to do it with the border-right of the left neighbour. I did the following with jquery to accomplish this:

<script type="text/javascript" language="javascript">
		$("#asd ul li:not(.current) a").hover(
					$(this).parent().prev("li:not(.current)").children().css("border-right","1px solid #00426F");
			, function(){
					$(this).parent().prev("li:not(.current)").children().css("border-right","1px solid #DBDBDB");
		$("#asd ul li:not(.current) a").active(
					$(this).parent().prev("li:not(.current)").children().css("border-right","1px solid red");
			, function(){
					$(this).parent().prev("li:not(.current)").children().css("border-right","1px solid green");
		$('#asd ul li.current').prev().children().css("border-right","1px solid #FFF");
The problem is that it doesn't fully work. Sometimes the border-right of currently hovered over item doesn't change colour (NOT it's previous neighbours). I assume this is because next neighbour has hijacked it's border-right.

Secondly, it doesn't work at all with :active mode.... i.e. when pressed.