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+
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 
bg.gif 
right.gif 
bg.gif
right.gif
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.