Dropdown CSS snapshot, instead
Remote link, problem resolved
A dropdown should appear at the top of the menu, but instead it appears on the right.
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 don't know where exactly the direction for the menu is set.
source to share
Remove position: absolute;
from the CSS #primary-nav ul
, maybe also take a look at using FireBug, it does a great job of experimenting with these things. Also which browser are you looking at? FF rendered the menu vertically, but was not properly aligned and there was no background.
source to share
I see this menu as a vertical dropdown, not horizontal. Indicate which browser you are viewing by asking CSS questions, as this goes a long way towards answering your question. Let us know if this has been fixed and what has been fixed for future readers.
One thing I've noticed is that your menu items are poking out of your vertical list on the right. Try to apply padding to only the element <li>
, not the anchor tag. This should fix your problem. When you apply it to both, you should keep in mind that first you add padding on <li>
and then add padding to the inner element so that it expands outside the container, which only has the first padding applied.