CSS Drop Down Menu

This multi-level CSS drop down menu is similar to the CSS Menu. It just extends it with additional flyout levels.

Like the CSS Menu, the CSS drop down menu is also driven by CSS.

Features
Source Code
Directions
License

SEO friendly: The HTML provides a clear hierarchy to the search engines
Fully CSS driven: light weight and high performance
Allow rounded corners and drop shadows without using any border/shadow images
Supported by all major browsers
IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+

1. HTML:

<ul class="menuH decor1"> <li style="margin-left:70px;"><a class="arrow">Dropdown Menu</a> <ul> <li><a class="arrow">Pure CSS Drop Down Menu</a> <ul> <li><a class="arrow">Templates</a> <ul> <li><a>CSS only codes</a></li> <li><a>Drop Down Menu Templates</a></li> <li><a>Menu Skins</a></li> <li><a>Web Drop Down Menu</a></li> <li><a>Design</a></li> </ul> </li> <li><a class="arrow">CSS Menu Design</a> <ul> <li><a>Design Dropdown Menu</a></li> <li><a>CSS codes</a></li> </ul> </li> <li><a>Demos</a></li> </ul> </li> <li><a class="arrow">Web Down Menus</a> <ul> <li><a>Template</a></li> <li><a class="arrow">Menu Design</a> <ul> <li><a>HTML</a></li> <li><a>Web Menu Design</a></li> <li><a>Web Down Menu Code</a></li> <li><a>Design</a></li> <li><a>Template</a></li> </ul> </li> <li><a>Demos</a></li> </ul> </li> <li><a class="arrow">CSS Dropdown Menus</a> <ul> <li><a>CSS Dropdown Menu</a></li> <li><a>Design</a></li> <li><a>Template</a></li> </ul> </li> <li><a>Demos</a></li> </ul> </li> <li><a href="#2" class="arrow">Dropdown Menu Design</a> <ul> <li><a class="arrow">SEO Tips</a> <ul> <li><a>SEO Friendly</a></li> <li><a>Search Engine Friendly</a></li> </ul> </li> <li><a class="arrow">Website Menus</a> <ul> <li><a>Horizontal Website Menus</a></li> <li><a>Website Drop Down Menu</a></li> <li><a>Website Menu Templates</a></li> <li><a>Website Menu Design</a></li> </ul> </li> <li><a>Browser Compatibility</a></li> <li><a>Cross Browser</a></li> <li><a>Design Tips</a></li> </ul> </li> <li><a href="#3" class="arrow">Down Menu</a> <ul class="dropToLeft"> <li><a>Down Menu Deoms</a></li> <li><a>Web Down Menu Instruction</a></li> <li><a>Cross Browser Compatibility</a></li> <li><a>Down Menu Directions</a></li> </ul> </li> </ul>

The images prepared for this menu:

arrow.gif