[Solved] CSS help with graphic based navigation

[christopher]

Hey all,

Need help solving an overlay issues I am having creating this navigation.

I have 6 horizontal nav items (images). Each is 143px wide and 358px in height. The idea is that when you hover over one of the nav items, the rollover image enlarges and overlays on top of the smaller nav items that particular image is next to.

I am basically having a z-index issue (I think). I am using the :hover pseudo element, but when hovering the images appear behind the other images and not over them. I tried increasing the z-index on the :hover element, but what happens is that you can hover the first items (farthest left item) and it works fine, but then when you try to hover over any other element nothing happens, the mouse cursor does not even change to a hand.

Any help would be appreciated. thanks Chris

[Gabriel]

I’d look at a jQuery + CSS solution to what you’re trying to do vs a CSS-only solution. It’ll end up operating a lot smoother for the user. There are a lot of prebuilt plug and play things out there, so you don’t have to know how to code it up from scratch.

Do some searches for accordion menus and you’ll find a bunch of good stuff.

I found this CSS only method, http://www.cssnewbie.com/css-only-accordion/ , but I really think this kind of navigation is much easier on the eyes with some animation sprinkled in.

[christopher]

I actually figured it out. I just set the li to a relative position and put an absolute position on the a:hover element. Did the trick. I did not test it out in IE though, but I just needed to get it to work in F.F., safari, chrome, and opera. Which it does.

Thanks speedgun and gaber for your advice. Much appreciated.

Chris

[Author]

Posts