CSS Dropdown/Fly-Out Menus

    <ul class="level1" style="margin-bottom: 0">

      <li class="submenu" >
        <a href="m1.php" class="one">CSS Menus</a>
        <ul class="level2 subone">
          <li><a href="m1.php">M1</a></li>
          <li><a href="m2.php">M2 - Tabbed</a></li>
          <li><a href="m3.php">M3</a></li>
          <li><a href="m4.php">M4</a></li>
          <li><a href="m5.php">M5</a></li>
          <li><a href="m6.php">M6</a></li>
          <li><a href="m7.php">M7</a></li>
          <li><a href="m8.php">M8</a></li>
          <li><a href="m9.php">M9 - Vertical Fly Out</a></li>
        </ul>
      </li>   

      <li class="submenu" >
        <a href="vertical_accordion.php" class="one">Fancy menus</a>
        <ul class="level2 subtwo">
          <li><a href="vertical_accordion.php">Accordion Menu</a></li>
          <li><a href="/codesamples/kwick_expanding">Expanding Menu</a></li>
          <li><a href="/codesamples/menus/vertical_image_menu.html">Vert. Image Menu</a></li>
        </ul>
      </li>   

      <li class="submenu" >
        <a href="/tools/color_scheme_generator.php">Devel / Tools</a>
        <ul class="level2 subthree">
          <li><a href="/tools/color_scheme_generator.php">Color Scheme Generator</a></li>
          <li><a href="/tools/gradient_generator.php">Gradient Generator</a></li>
          <li><a href="/tools/round_corner_graphic_creator.php">Round Corner Graphic Creator</a></li>
          <li><a href="/tools/banner_image_maker.php">Banner Image Generator</a></li>
          <li><a href="/codesamples/editors/tinymce_editor.php">TinyMCE Formatting Text Editor</a></li>
          <li><a href="/codesamples/forms/contact/contact.php">Contact Admin & Contact Form</a></li>
          <li><a href="/codesamples/forms/upload/upload_file.php">Image/File Upload & List</a></li>
          <li><a href="/tools/webcolors.php">Sortable Web Colors</a></li>
          <li><a href="html_custom_chars.php">HTML Entities/Hex Codes</a></li>
        </ul>
      </li>


      <li class="submenu" >
        <a href="#">Toys</a>
        <ul class="level2 subfour">
          <li><a href="/codesamples/miscellaneous/font-sizes.html">Fonts</a></li>
          <li><a href="/codesamples/chain">Mootools Chain of Events</a></li>
          <li><a href="/codesamples/tooltips">Mootools Tooltips</a></li>
          <li><a href="/codesamples/fading_text">Fading Text</a></li>
          <li><a href="/codesamples/toggle">Mootools Toggle</a></li>
          <li><a href="/codesamples/miscellaneous/drop_shadows_using_gimp.html">Drop Shadows</a></li>
        </ul>
      </li>

      <li class="submenu" >
        <a href="index.php" class="one">Codesamples</a>
        <ul class="level2 subone">
          <li><a href="/index.php" class="five">Home</a></li>
          <li><a href="/index.php?option=com_content&task=view&id=124">Contact</a></li>
        </ul>
      </li>   

    </ul>
  </div>

body { behavior:url("csshover.htc"); }

/* menu container */
div#nav {
  width: 100%;
  display: block;
  margin-top: 1px;
  font-weight: bold;
  margin: 10px 3px;
}

/* set UL defaults to 0 */
div#nav ul {
  padding: 0; 
  margin: 0;
}

div#nav li {
  position: relative; 
  list-style: none; 
  float: left; 
  border-bottom: 1px solid #000;
  margin: 0 2px 0 0; /* give slight margin to the right of toplevel buttons */
  background: #336600; /* darkgreen */
  width: 151px; /* did some simple math to decide widths; with a fluid 
                  width page you can use % but should keep the total 
                  a tad under 100% to keep IE happy. */
  height: 30px;
}

div#nav li:hover {
  z-index: 10; /* really only necessary when using images and getting some
                interference with another application obscuring the menu */
  background: #008000; /* green */
}

div#nav li a {
  display: block; 
  text-decoration: none; 
  color: #FFFFFF; 
  text-align: left;
  width: auto;
  border-left: 8px solid #808000; /* olive */
  height: 20px;
  padding: 2px 0 0 10px;
  margin-top: 4px;
  margin-bottom: 4px;
  /* I did a little messing with the height, margins and padding to obtain
  the fake olive bar on the button lefts. */
}

div#nav li a:hover {
  color: #ccc;
}

div#nav>ul a {
  width: auto;
  color: #fff; 
}

div#nav ul ul {
   position: absolute; 
   width: 100%;
   display: none;
}

div#nav ul ul li {
   width: 100%;
}

div#nav li.submenu {
/* reserved for whatever ... */
}

div#nav ul ul li.submenu {
/* reserved for whatever ... */
}

div#nav li.submenu:hover {
  z-index: 100; /* not needed here but maybe with your site */
}

div#nav li.submenu li.submenu:hover {
}

div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 
  li.submenu:hover ul.rollover, div#nav ul.level2 
  li.submenu:hover ul.level3 {
   display:block;
}

div#nav ul.level2 li {
  background: #191970;
}

div#nav ul.level2 li:hover {
  background: #333ec4;
}

div#nav ul.level2 {
  top: 30px;
  left: 0px;
}

div#nav ul.level3 {
  top: 0em;  
  left: 140px;
  /* reserved for implementation of second level sub menus */
}

/* To make the last menu item a tad narrower and remove extra border if there is one */
#nav .contact { 
  width: 126; 
  border-right: none; 
} 

/*   CUSTOM SUBMENU WIDTHS:
    Sometimes you have to make a menu or submenu wider to accomodate 
    an overabundance of label. Leave the classes empty or set to auto
    if not required and/or delete in the menu HTML code.  
*/

#nav .subone { width: 151px; }
#nav .subtwo { width: 151px; }
#nav .subthree { width: 240px; } 
#nav .subfour { width: 240px; }