CSS dropdown, drops right instead

Question

Removed link, problem solved

The menu at the top is supposed to be a dropdown menu, but it expands to the right instead.

My CSS is this (I believe this is the relevant bit anyway)

#primary-nav, #primary-nav ul { list-style: none; margin: 0px; padding: 0px; }
#primary-nav ul { position: absolute; top: auto; display: none; }
#primary-nav ul ul { left: 100%; top: 0px; }
#primary-nav li { float: left; }
#primary-nav li li { float: none; position: relative; }

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul { display: none; }

#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { display: block; }

I have no clue where exactly the direction for the menu is set.

Answer 1

Remove the position: absolute; from the CSS of #primary-nav ul also maybe have a look at using FireBug, it's prilliant at experimenting with these things. Also what browser are you looking in? FF displayed the menu vertically but just wasn't aligned properly and didn't have the background.

Answer 2

It is kindof dropping down now, but in Firefox 2 it flashes and is barely unclickable due to that. And in IE7 it's poorly aligned and totally unclickable...

Answer 3

Take a small and nice reading here.

Answer 4

I am seeing this menu as a vertical drop-down, not a horizontal one. Please specify what browser you're viewing in when asking CSS questions, as it makes a big difference in how to answer your question. Let us know if it is fixed, and what fixed it for future readers.

One thing I noticed is that your menu items poke out of your vertical list at the right. Try applying the padding to only the <li> element, not the anchor tag. This should fix your problem. When you apply it to both, you have to keep in mind that first you're putting the padding on the <li>, then adding more padding to the inner element so that it expands outside of it's container which only has the first amount of padding applied.