How-to: Drupal Primary Links into Drop-down Menus

Use the following code in a Drupal theme stylesheet and you'll obtain drop down menus.

Layout.css

#primary{ width:900px; float:left; position:relative; }
#primary li.leaf, #primary li.expanded, #primary li.collapsed{ list-style:none; }
#primary ul{ padding:0; margin:0; float:left; z-index:10; }
#primary li{ float:left; margin:0; padding:0; }
#primary a{ display:block; /*line-height:22px !important; /*height:22px; long phrases fit into menu*/ } /* hide drop down and flyout */
#primary li ul, #primary li:hover ul ul, #primary li:hover ul ul ul, #primary li.sfhover ul ul, #primary li.sfhover ul ul ul{ left:-999em; } /* dropdown */
#primary li ul{ position:absolute; width:170px; /* req'd */ /*width*/ margin-left:5px; z-index:500; }
#primary li ul a{ width:148px; /* req'd */ /*width*/ } /* show dropdown */
#primary li:hover ul, #primary li.sfhover ul{ left:auto; z-index:510; } /* show flyout */
#primary li li:hover ul, #primary li li.sfhover ul{ left:150px; margin-top:-2em; z-index:520; }

Style.css

#primary{background:#000;margin:0;padding:0;position:relative;}
#primary a{font-weight:bold;color:#fff;border:4px solid #000;padding:5px;font-size:1.1em;margin:0 5px;}
#primary li:hover a,#primary li.sfhover a,#primary li a.active{border-top-color:#fe9900;border-bottom-color:#fe9900;}
#primary li:hover ul,#primary li.sfhover ul{background:url(/sites/all/themes/zen /images/menu_drop_bg_bottom.gif) center bottom no-repeat;padding-bottom:26px;line-height:1.8em;}
#primary ul ul li{background-color:#ffe5bf;border:1px solid #fe9900;border-width:0 1px;}
#primary ul ul li a{color:#000;border:0;font-size:.9em;padding:0 5px;}
#primary ul ul li:hover,#primary ul ul li.sfhover{background-color:#fe9900;}
#primary ul ul li:hover a,#primary ul ul li.sfhover a{color:#fff;}
#primary li li:hover ul div,#primary li li.sfhover ul div{background:url(/sites/all/themes/zen /images/menu_drop_bg_top.gif) left -18px no-repeat;padding-top:8px;}
#primary li li:hover ul a,#primary li li.sfhover ul a{color:#000;}

#primary li li li:hover.first,#primary li li li.sfhover .first{}
#primary li li li:hover a,#primary li li li.sfhover a{color:#fff;}
#primary li li li:hover ul a,#primary li li li.sfhover ul a{color:#fff;}
#primary li li li li:hover a,#primary li li li li.sfhover a{color:#000;}
#primary ul ul li.expanded{background-image:url(/sites/all/themes/zen /images/menu-collapsed.gif);background-position:85% center;background-repeat:no-repeat;}