This menu on this page uses simple CSS styling to transform ordinary text hyperlinks to the kind of menu that an action can create — without all the added javascript and stuff.
First, draw a layered box the width you want your menu to be, then type in each location for the menu on its own line.
I like my menus to be made from lists because I think lists maintain a meaningful structure in the absence of styling. Click here to see this page without styles. For me, this means the content is preserved in worst case scenarios. So, to make the list structure, create a New Style from the cog in the Styles Palette and name it menulist.
In the Paragraph attributes set the List style to Round Bullets. We don't really want bullets, but we do want Freeway to to set this style as an unordered list. To get rid of the bullets, we will over-ride it with an Extended attribute, so click the Extended button and create the attribute list-style-type with a value of none. While we're there, let's add two more extended attributes, margin-left and padding-left, both with values of zero.
Before we're finished with this style, let's set our basic type style for our menu. Font, size, and color are all allowable for this style. Now go back to the page and apply the style to the menu text. Freeway still shows bullets in the work view, but won't appear in preview or your browser.
Next, create your hyperlinks for each item in the list. The default link style is ugly blue with underlines — to change it we will need to target just the items in our list with Tag styles to cover the Link and Hover states.
Browsers use the names of styles to target or select the items they apply to. Our earlier style for the menu is a "class" style because it uses a user-selectable name to define a class of objects or spans of text that we then single out to be affected. Styles can also select their targets by their structural tags, alleviating the need for us to identify the object or texts they apply to. Ordinary paragraph <p> and header <h1> styles are examples of what I call "tag" styles.
Create a new style from the Styles Inspector cog. To make it a Tag style for the Link state of our menu items, we would put the name for it in the Tag field of the New Style window, so put ul.menulist li a into the Tag field – spaces and all. This is the same as saying "this style affects hyperlinks in list items that belong only to unordered lists with the class style 'menulist'".
Set the Character Color attribute to White… this of course changes the link's ugly blue color back to the white we originally set for our menu's list items. To get rid of the underline we need to click the Extended button and create the attribute text-decoration with a value of none.
Now create another new style, this time for the Hover state of our menu links. In the Tag field, name it ul.menulist li a:hover — which still targets only the list item links in our specific menu list — but now only when the mouse pointer is hovering over them. In other words, a rollover.
This time we're interested in setting the Character Background Color attribute so that when the mouse pointer is over our menu link, the background color behind the type changes to highlight the link. Unless we want the type Color to also change, we don't need to re-apply it because it is an inherited attribute. The same goes for the text-decoration attribute.
Now preview the page. You'll notice that our menu looks pretty normal except for two things: the type is flush against the left side of the window, and when we put the mouse cursor over any of our menu links the background color is just barely visible. Let's fix that.
Choose Edit Styles from the Style Inspector cog and select our menu link state style ul.menulist li a. To make the background extend across the width of box we drew, click the Extended button and create the attribute display with a value of block. To get the background to extend slightly above and below our link, we will "pad" the area around the link a bit.
To do this, create another extended attribute for this style and name it padding. The shortcut way to define padding is to do it all at once, describing values for the top, right, bottom, and left sides in clockwork fashion. So a value of 3px 0 4px 20px will expand the space above our menu links 3px and below them by 4px. The display:block attribute takes care of our horizontal space so those measurements can be set to zero, except for the left setting which has the effect of moving our link type over 20px while keeping our rollover effect. You can alternately move the type over by moving the left edge of the menu box over, but remember the background-color would also move over.
There you have it, a simple but stylish menu using only CSS.