Single Column version of Horizontal Drop Down Menu
ul.menu {list-style:none; margin:0; padding:0; margin: 0px auto; font-size: 2.0vw;}
menu a { color: black; text-decoration: none; }
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px;}
ul.menu ul {position:absolute; top:4.0vw; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none; font-size: 15px;}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:250px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#4a4; color: white;}
ul.menu ul li a:hover {background-color:#8f8; color: black;}
ul.menu ul ul {left:250px; top:-1px}
ul.menu .menulink {color: white; padding:5px 7px 7px; font-weight:bold; border: 0.4vw #2b3e10 solid; border-radius: 0.5vw; background:#2f8a06;}
ul.menu .menulink:hover, ul.menu .menuhover {color: black;}
ul.menu .sub::after {font-weight: bold; color: white; font-size: 110%; content: " →"}
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 body which must be of a fixed width.

" ul.menu li" uses  position:relative; float:left;  to arrange the menu from left to right relative instead of one below the other.

"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.