[totaltec]

Here is a starting point for a simple, no-frills CSS drop down menu.

CSS:

/* Drop Down Menu */
ul#nav {
  position: absolute;
  top: 105px;
  margin: 0;
}

ul.drop a { 
  display:block; 
  color: #fff; 
  font-family: Verdana; 
  font-size: 14px; 
  text-decoration: none;
}

ul.drop, ul.drop li, ul.drop ul { 
  list-style: none;
  margin: 0; 
  padding: 0; 
  /*border: 1px solid #fff; */
  background: transparent; 
  color: #fff;
}

ul.drop { 
  position: relative; 
  z-index: 597; 
  float: left;  
}

ul.drop li { 
  float: left; 
  line-height: 20px; 
  vertical-align: middle; 
  zoom: 1; 
  padding: 5px 20px; 
  font-size: 14px;
}

ul.drop li.hover, ul.drop li:hover { 
  position: relative; 
  z-index: 599; 
  cursor: default; 
  background: #555; 
}

ul.drop ul { 
  visibility: hidden; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  z-index: 598; 
  width: 195px; 
  background: #555; 
  /*border: 1px solid #fff;*/
}

ul.drop ul li { 
  float: none; 
  background: #107BB8;
  font-size: 12px;
}

ul.drop ul li a{ 
  font-size: 12px;
}

ul.drop ul ul { 
  top: -2px; 
  left: 100%; 
}
ul.drop li:hover > ul { 
  visibility: visible;
}
ul.drop li:hover ul { 
  visibility: visible;
}

Template structure:

<ul id="nav" class="drop">
  <li><a href="home.php">{$lng.lbl_site_path}</a></li>
  <li><a href="#" onClick="return false;">{$lng.lbl_products}</a>
      {*Drop Down List*}
      <ul>
         <li><a href="product.php?productid=1">Product 1</a></li>
         <li><a href="product.php?productid=2">Product 2</a></li>
      </ul>
      {*/Drop Down List*}
  </li>       
</ul>

To loop through the speed bar, instead of the handwritten code above use this in place of the {*Drop Down List*} <ul> above:

      {foreach from=$speed_bar|@array_reverse item=sb name=nav}
          <li><a href="{$sb.link}">{$sb.title}</a></li>
      {/foreach}

To loop through the categories (untested):

{foreach from=$categories_menu_list item=cat name=top_cats}
  <li><a href="home.php?cat={$cat.categoryid}">{$cat.category}</a></li>
{/foreach}

If you want to do your entire category list, turn on Flyout menus, but be sure to uncheck cache the menu in settings. Working with the cached menu is better, but more complicated.