Question

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 here 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.

Answer 1

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.