CSS — responsive horizontal nav with sub nav below

Question

I have this horizontal nav which works how I want it to: http://jsfiddle.net/rnSY4/

When the window is made smaller the main nav items collapse pushing the sub nav down.

I would prefer it if the sub nav UL was a child of one of the main nav LIs but I can't work out how to do it. All the solutions I've found involve adding position: absolute to the sub nav which means it won't move down when the main nav collapses (I also need all the content below the sub nav to move down as well).

Anyone have a solution?

Answer 1

You simply need to remove the overflow:hidden from the parent UL, set the top level LI to have position:relative (so that the drop downs position relative to them not the header) and then apply styles to the drop down.

http://jsfiddle.net/rnSY4/1/

For cross browser compliance you will need to load some Javascript to add an on hover event to the LI so that you can show the drop down on IE6.