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.

  • 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 drop down menu cross browser
    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 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. cssmenu.htc file:

It uses the same cssmenu.htc 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.

It uses the same license, and the license is to be placed at the same location as the CSS Menu.

Ask Question

Question Title:
Your name:
+ =    
  • If your question is for troubleshooting, please read Troubleshooting Request before posting.
  • A title with good keywords will help others. Please make your title specific and on-topic
  • Questions related to styles(CSS) may not be answered