How to build a CSS horizontal menu?

[mr_nabo]

Hi,

What is the best way to build a menu that is horizontal like in the image below?

<snip>

(the link expires in a week btw)

The left-side of the sublist needs to align with the parent list plus it needs to be accessible (but I don't mind using a bit of javascript - via JQuery for example - to make the :hover work in IE6).

I also don't mind paying for a pre-built system as I'm seriously low on time!

Can anyone point me to a resource?

Thanks

osu

[edited by: swa66 at 9:56 am (utc) on Feb. 20, 2009]
[edit reason] No personal links, please see ToS and forum charter [/edit]

[swa66]

Try explaining in words what you seek.

From your description you might be looking for a dropdown menu.
To give you a keyword to search on "Suckerfish" or "Son of Suckerfish" will lead you to examples.

A tiny bit of Javascript should be enough to get IE6 in line [you need a hover on an <li>] (or you could teach IE6 abit more in one go with IE7.js)

[mr_nabo]

Ok, I'll try and do it via another method:

I need the navigation like so (capitals is the active link - ignore the nbsp's, just put those in so you can see I need the actual layout):
___________________________________________
¦ Home ¦ About ¦ NEWS ¦ Contact ¦
___________________________________________

   

¦ News 1 ¦ NEWS 2 ¦ News 3 ¦
___________________________________________

Does that make better sense? Basically, I need the second level navigation to be horizontal and inline with the parent ul li (haven't been able to do it that way with suckerfish though).

Thanks

[swa66]

Looks like you seek a "drop line" or "two line" menu. Examples are out there.

I'm not sure I fully understand what you want to happen with the alignment.

[mr_nabo]

Basically, I need the left-hand side of 'News 1' to align with the left-hand side of 'NEWS'.

Any sub pages of 'About' would need to align with its left side as well - is that clearer?

Let me know if not.

Thanks for your help

[swa66]

If you give the first level li's a position relative, you could give the second level ul's position absolute and align them left:0 and top: 1em or so ?
You could then make the second level li's inline