• This version normally goes across the top.
•  Note if you shrink it it will use a hidden TOC on the left side.
• A second search box appears when the fly out menu gets replaced and its associated search element goes away.
• The top level topics can be hidden or displayed when the fly-out menu disappears by adjusting the embedded JavaScript.
• Caution: this is the only page which shows this menu.  Links off of this page will show pages without this menu
• The JavaScript need to support this is automatically included if the fly out menu tag is detected.
• The menu can be limited to a certain depth of fly-outs.
• This version supports an infinite number so the sections need to be arranged with the ones with the most depth to the left. Putting the search box to the right allows for proper layout with one level of fly-out for the rightmost section.
• If you want a single level of flyouts to one (i.e., a single column under each section head) then the menu can be centered or expanded to be the full page width
• Below is the style sheet for this.

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.