nav hover issue

styler · May 28th, 2008, 07:40 AM

Hi

I've created a horizontal nav bar where i've positiond each list item slightly over the next to create an overlap effect. i have used z-index so when you hover each item it comes to the foreground, see working example here:

http://dave-tyler.co.uk/emperor/navtest.html

this works fine in Firefox, Safari etc but (as always) IE7 & 6 has a problem when you hover - it doesn't seem to recognize the z-index value so doesn't bring each item forward.

any ideas?

(the css is in the head so just view source).

Aso · June 1st, 2008, 08:31 AM

You might want to try increasing the width and adding a negative margin on hover, rather than using z-index.

Code:

#id {
width: 100px
}
#id:hover {
width: 110px;
margin-right: -10px
}

Obviously these dimensions are just examples, so replace with your own

The negative margin simply means the item to the right of the element is not 'pushed' over (the negative margin is equal to the additional width when hovered).

styler · June 1st, 2008, 12:29 PM

that works great - many thanks

Aso · June 1st, 2008, 02:53 PM

Glad to help styler - if you have any more question feel free to ask