CSS Menu - Create a cross browser compatible non-javascript menu

Building a clever and stylish Javascript menu for a website from scratch can be time consuming. Most people save time by using a proprietary web tool to complete the process - only to find that it only works on one browser type.

This solution looks and operates similarly to a Javascript function but uses CSS styles to generate the look and feel and HTML for the code.

The following browsers operate correctly with this code:

  • MS Internet Explorer v5, v6 & v7
  • Mozilla (Netscape & Firefox)
  • Safari (Apple Macintosh)

    • The core of the code lies in the use of the "UL" tag (unordered list) and the "LI" tag (bullet list) combined with the style sheet property "display"

    By creating styles around the LI tag and using "onmouseover" and "onmouseout" event we can control when and where various levels of the menu appear.

    Sample 1 shows the first example from the download. This simple menu shows 3 levels of menu with a particular style applied.

    Sample 2 shows the same menu but with a different style applied.

    You can tailor the stylesheet to create any given effect. This website shows the menu with a graduated background image. The style is up to you.

    Main menu code shown below with comments

    image showing code samples and comments to code