Quick demo page of Vertical Drop down

The flyout style sheet used here is

ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu ul {position:absolute; top:00px; left:145px; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#c5c5c5}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(/images/ddMenuHeader.gif); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(/images/ddMenuHeader_over.gif)}
ul.menu .sub {background:#d1d1d1 url(/images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

Explanation:

"ul.menu ul" sets the location where the 1st level fly-out will occur relative to the top of the containing DIV tags. Note: if tables are used this is an absolute address relative to the top left of the page.

"ul.menu .menulink" controls an optional image which is used for the fixed part of the menu. Note the width is 134px this relates the the "left" dimension defined in "ul.menu ul". As well as "ul.menu ul ul" left spacing.

"ul.menu ul ul" defines a graphic which will be displayed to show that there is a next level.

Finally, this system uses the same Java-script as the horizontal drop down system so both cannot be used on the same template.