This is not a tutorial in CSS. There is no explanation of how various css properties work, how they should be used nor is it a complete overview of all css properties that might be applied to the menu. It contains some simple explanations of the menu properties, using css classes and applying them to the menu. It contains a selection of simple examples of css styled menus which can be used as a base. I deliberately didn't do any 'fixing' based on browsers so that these differences will be kept in mind when using css to style the menu.


View Examples

  1. The examples in the demo are divided into 4 types. Each example has a beginning header with the style number in it. The css styling does not apply to the header. The first 3 types [styles 1 through 6] have no submenus:

    • The first example, creatively called 'style 1' applies one css property, padding. The rest of the properties are set in the menuStyle as usual.

    • The second, creatively called 'style 2' applies padding using css in an aI string to apply a padding change in only one item.

    • Examples 3 through 6 apply various css properties and no properties in the menuStyle other than the required offclass and onclass in order to apply the css styling.

    • The last example uses the full Milonic menu with submenus and creates different css styles for the main menu and the submenus. The main menu contains no Milonic style properties while the submenu is styled using both css classes and Milonic style properties in the menu data file.

  2. All the css is placed into one stylesheet. All the classes have the same base name of menuOff and menuOn, and each includes a number related to the example. So for the style 1 example the classes would be .menuOff1 and .menuOn1, for style 2, .menuOff2 and .menuOn2 and so on.

  3. Each example has the related css style code shown below it. The menus on this page are placed using relative positioning and inside the table because it is easier for layout purposes. It is not required that you position a menu relatively in order to use css styling.

DHTML Menu courtesy of  Milonic Solutions
DOWNLOAD the stylesheet and data file.