webgen logo

webgen / static website generator

static website generation made easy!

Sub Menu

Tips

  • The basics pagecontains everything one needs to get going with webgen!
  • Descriptions for plugins can be found in the plugins section

Latest news

2007-12-31: Minor release with feature enhancements. More...

2007-09-08: Small bug fix release. More...

2007-06-29: Some bug fixes and one small feature enhancement. More...

Links

Generated by webgen

General Information

Plugin name:MenuStyle/HorizontalDropdown (MenuStyle/Default)
Author:Thomas Leitner <t_leitner@gmx.at>
Summary:Builds a horizontal menu with CSS drop down submenus
Handler name:horizontal-dropdown

Description

Builds a horizontal menu with CSS drop down menus. This menu should work fine in any browser supporting CSS and the :hover selector (Mozilla based browsers like Firefox, Opera and Konqueror are fine, does NOT work in IE 6 on Windows XP, not tested with IE 7).

Caveat: You should link to the webgen-css resource in your template as this plugin defines some CSS styles!

Style Advice

The menu works by only using CSS, not DHTML or anything else. Following is a list of CSS selectors and descriptions how these selectors can be used to style various parts of the menu. You have to pay attention to the last element in the selector (ul, li, or a). When you want to style menu items, you normally want to use a. You should also be aware of the use of the > sign, there is a dramatic difference between writing li a and li > a (the former selecting ALL a elements of the list item, i.e. all a elements in submenus too; and the latter only selecting the direct descendants)!

.webgen-menu-horiz-dd ul > li > a Style the top level menu items (the ones that are always shown)
.webgen-menu-horiz-dd ul ul Style the drop down menus
.webgen-menu-horiz-dd ul ul > li > a Style the drop down menu items
.webgen-menu-horiz-dd li:hover > a Style the hovered-over menu item

Examples

Used parametersResulting menu
Using default values