SITE

My work-in-progress site

 

DESIGN

 

So my designer has given me this design with a horizontal nav. Each <li> item has a right border of 1px. When you rollover the <li> they element appears taller. I've managed to create this simply with CSS - setting the height property to create a taller height.

 

ISSUE:

When you rollover each <li> item the previous <li> has a border of 1px. This creates an undesirable hairline to the left of each <li> on rollover. It's pretty fiddling tiny details but very noticeable and my designer wants it like her design.

 

SOLUTION

So can I use some javascript to co-oerce some manipulation?

 

Here's how i think i can resolve this...

 

1. use onmouseover on each <li> to trigger a function

2. this function will take the previous <li> element and set the css to border 1px white (or none)

 

Is this the best way to resolve this? Alhtough I know the fundamentals of javascript I mainly deal in CSS so this kind of script writing is a little beyond me. I could have a crack but...

any ideas would be appreciated or if someone could quickly explain to me how I could write this JS.

 

Is it possible select a previous <li> element?

 

here's my rough sketch outline of how i think it works

 

<script type="text/javascript">
<!--

function bordergone( relevant li )
  {
  document.getElementBy li element then take the previous li
print new css border: 1px #fffff solid
  }

//-->
</script>

How about on hover, you give the item being hovered upon a border to the left with the same color and width. You also give it left: -1 to force it to stay in the same spot