Demo of CSS Drop Down Menu

Template 1   Template 2   Template 3   Template 4   Template 5  

Menu Alignment and Layout

CSS Drop Down Menu

This multi-level CSS drop down menu extends the CSS menu with additional flyout levels. So the source code (HTML and CSS) are a little bit different.


  • SEO friendly: The HTML provides a clear hierarchy to the search engines
  • Fully CSS driven: light weight and high performance
  • Supported by all major browsers
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+
  • License Fee: $7.00
    About License

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 CSS Drop Down Menu arrow   bg.gif CSS Drop Down Menu background   right.gif CSS Drop Down Menu Right Arrow

2. CSS:

Download the CSS file.

Please read Menu Alignment and Layout for more discussions on the menu layout.

3. file:

It uses the same file as the CSS Menu does.

Please refer to the Directions section in page CSS Menu.

Please refer to the License section in page CSS Menu.


Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.