How to get dropdown menus to align with the correct menu tab

I've been trying to get my CSS drop down menu to align with the item that is being hovered over. For some reason, it always is at one corner. The relevant CSS & HTML codes are h开发者_开发百科ere http://jsfiddle.net/AnQwL/1/

I've tried looking at examples to see if I'm doing something different, but I couldn't find a mistake. The positioning to the far left is because I've set position: absolute. However, without this, everything goes awry. Also, all the other examples use absolute positioning too.

Also, how do I get it to be horizontal? i.e., in a line instead of one below the other?

I'd appreciate any help in solving this. There is a possible duplicate here css dropdown menu appears at the first tab however, the question wasn't answered.

You need to relatively position the outer <li>s. Using position: absolute positions the element absolutely relative to the closest relatively positioned element.

http://jsfiddle.net/Eric/MkKWa/

Also, you misused the id in the original: you had two #submenu elements, which is incorrect usage of the id attribute.

If you want a horizontal menu you need the ul li elements floating left. And to make the submenu to open at the right place you need to specify position relative for ul li and position absolute for ul li Ul.

Try it ;)