HORIZONTAL NAVBAR - liquid two -level drop-downs.
This is based around the suckerfish CSS dropdowns. It is liquid to font size changes though in Safari it might need to be refreshed after changing font for the pop-ups to be in the right places.
The freeway file is here.
They use nested lists, but Freeway doesn't support nested lists. To make nested lists in Freeway, in-line html boxes are needed each of which must have the Remove DIV Tag action applied.
The base level of list items should be styled .nav. The first element of this list becomes the menu item always seen by the user across the menubar. Subsequent list lines drop-down when the first element is hovered over. If in-line html boxes are added within this list, and given the 'remove div tag' action and the round bullet list style, they will then pop-up to the right of the first level drop-down element when it is moused over.
Note that each of these drop-downs are contained within separate divs that run along the top of an enclosing div called 'topbannerdiv'. Make sure your site view is set to 'Show Items' to appreciate the heirachy. Also check the menu Item > Extended for some div settings. Each drop-down list can be moved to start any desired horizontal point along the screen (using percentages from left or right is best). The enclosing div starts a fixed distance from the top of the screen, under the banner, and includes a 1.5em high coloured bar behind the menu elements to provide continuity of colour across the whole menubar.
Styles used in horizontal navbar:
.nav (base style for all text in the list) - this a class, not a tag
round bullets, bgcolor blue; list-style none, margin 0, padding 0, line-height 1.5em,
(width at 100% fills div otherwise can be set in em as desired; useing the same colour in a div behind the navbar fills in any gaps (set both heights in ems)
*** all these are tags
.nav a - base style for anchors
di splay: block, list-style none, padding 0 1em, colour as desired
padding adds space to both sides of all links
width not specified (inherited from .nav) display:block is essential.
.nav li (base style for lines in header, overridden for drop-down lines by following styles:
width 14em, float left (width must be specified, float left keeps line text hard left).
.nav li a:hover - link style when hovering over header lines
(sets colour when hovering over header lines, as desired)
.nav li ul - base style for drop-down lines
left -999em, position absolute, width 14em
(shifted off-screen unless needed to drop-down. If padding/margins used in .nav can be set to 0 here if needed. Width must be specified here again)
.nav li ul a:hover - text style when hovering over an anchor in a drop-down
(optionally sets colour or other characteristics when hovering over anchors in drop-downs, can be different from the hover color of the main navbar level)
.nav li ul ul - drop-down list style
margin -1.5em 0 0 10em (moves first line of second level pop-up so that it is to the right of and next to a drop-down item that has been hovered over)
.nav li :hover ul ul, .nav li :hover ul ul ul - hides un-hovered sub-lists
left -999em
.nav li :hover ul, .nav li li :hover ul, .nav li li li :hover ul - new sub-list colour
bgcolour as needed, left:auto (colour for new pop-up list elements)
.nav li:hover ul - drop-down list style
left:auto, background color: green or as desired
can be left b lank, allows alt colour for pop-up items; left:auto is what makes it visible on mouse-over
.nav ul - base style for first level drop-down
as per .nav, for basic formatting of all secondary (UL) list elements.
Take care changing any of these parameters. This page should be a master page of a working site.