The first thing I did was create my menu structure. For this tutorial to work, you’ll need to ensure all the menu items are set to expanded (which makes sure they are all rendered when the menu is sent to the theme layer).
For purposes of this tutorial, I create a very blank theme (I started off use Garland, but I wanted to keep the CSS generic). I assigned the menu block (primary links) to a region on my page:
Next, I added the following CSS. As you can see, I’m using the unique identifier on the primary link block in this example. Check out the CSS comments to better understand what each line of CSS does. This CSS works with any number of child menus. NOTE: If you wanted your menus to scale with the font size, you could replace all the measurements with “ems”.
For demonstration purposes, I left off one very import line of CSS to show the new layout of the menu structure. As you can see, the LIs are now positioned vertical their parent, and the child ULs are positioned off to the right. I wanted to show all the menu items in their desired layout to give you the opportunity to adjust the CSS (height, width, padding, etc).
Now, you can add the last line of CSS which hides the display of all the child ULs:
The previous line of CSS will leave you with just the top level menu items:
Here’s an example of what the final result will look like. If you implement this code, and mouseover the menu structure, the child ULs will appear and disappear.