CSS Menu

Displaying lots of content while keeping a clean layout, this type of menu is becoming more and more popular, and has been widely used on e-commerce or large scale websites.

  • HTML: Search engine friendly
  • Fully based on CSS: extremely easy, light weight and high performance
  • Allow rounded corners and drop shadows without using any border/shadow images
  • CSS3 in older IE browsers:
    VHM technique is used in the HTC file that makes the CSS3 rounded-corner and drop-shadow features also available for IE8 and earlier (for top-level menu only, not for sub-menus).
  • Supported by all major browsers CSS Menu cross browser
    IE 6.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+

The source code has three parts: HTML, CSS and the menucss.htc file.

1. Choose a template:

Choose a template from above that suits your own style. The CSS link listed below will change accordingly.

2. HTML:

<ul class="menuTemplate1 decor1_1" license="mylicense"> <li><a href="#CSS-Menu">CSS Menu</a></li> <li class="separator"></li> <li><a href="#Horizontal-Menus" class="arrow">Horizontal Menus</a> <div class="drop decor1_2" style="width: 640px;"> <div class='left'> <b>CSS Menu</b> <div> <a href="#">Html 5 menu</a><br /> <a href="#">Web menu CSS</a><br /> <a href="#">Css menus</a><br /> <a href="#">Nav element</a><br /> <a href="#">SEO menu</a> </div> </div> <div class='left'> <b>Menu Templates</b> <div> <a href="#">Menu template</a><br /> <a href="#">Menu skin</a><br /> <a href="#">Web menu styles</a><br /> <a href="#">Best css menus</a> </div> </div> <div class='left'> <b>SEO Friendly</b> <div> <a href="#">Search engine friendly</a><br /> <a href="#">Best css menu</a><br /> <a href="#">Most popular menus</a><br /> <a href="#">Best web menu designs</a><br /> <a href="#">E-Commerce sites</a><br /> <a href="#">CSS Templates</a><br /> <a href="#">Menu Design Templates</a><br /> <a href="#">Clean layout & alignment</a><br /> <a href="#">Favorite menus</a> </div> </div> <div class='left' style="text-align:right; width:200px;"> <img src="../img/demo/hd6.png" style="width:128px; height:128px;" /><br /> Search Engine friendly (SEO) </div> <div style='clear: both;'></div> </div> </li> <li class="separator"></li> <li><a href="#CSS">CSS</a></li> <li class="separator"></li> <li><a href="#Horizontal-Menu-CSS">Horizontal Menu CSS</a></li> <li class="separator"></li> <li><a href="#Web-Menu" class="arrow">Horizontal Web Menu</a> <div class="drop decor1_2 dropToLeft2" style="width: 500px;"> <div class='left'> <b>SHOPPING TOOLS</b> <div> <a href="#">Build your script</a><br /> <a href="#">Review current offers</a><br /> <a href="#">See All ...</a> </div> <b>RSS FEED</b> <div> <a href="#">Find a location</a><br /> <a href="#">Request a test drive</a><br /> <a href="#">See All ...</a> </div> </div> <div class='left'> <b>BE CREATIVE</b> <div> <a href="#">Build your script</a><br /> <a href="#">Review current offers</a><br /> <a href="#">See All ...</a> </div> </div> <div class='left' style="text-align:right; width:160px;"> <img src="../img/demo/hd7.png" style="width:128px; height:128px;" /><br /> Contact Us </div> </div> </li> <li class="separator"></li> <li><a href="#Web-Menus" class="arrow">Web Menus</a> <div class="drop decor1_2 dropToLeft" style="width: 460px;"> <img src="../img/demo/css-menu-t3.jpg" style="float:left; width:98px; height:180px;margin:10px 80px 10px 40px;" /> <div class='left'> <b>PURE CSS MENU</b> <div> <a href="#">Build your script</a><br /> <a href="#">Review current offers</a><br /> <a href="#">See All ...</a> </div> <b>POPOUT MENU</b> <div> <a href="#">Find a location</a><br /> <a href="#">Request a test drive</a><br /> <a href="#">See All ...</a> </div> </div> </div> </li> </ul>
select css menu code

3. CSS:

Download the CSS file for template 1

Visit Menu Alignment and Layout for tuning the menu layout.

4. menucss.htc file:

Download the menucss.htc

Without the HTC file, the menu will not work properly in IE 8 and earlier.

  • IE5 and later support the CSS behavior property. The behavior property is linking to an HTC (HTML Component) file. The HTC behavior file is actually an HTML file that contains the defined components and a script in order to implement Dynamic HTML.

    The CSS behavior is defined as below in the CSS file:
    .menuTemplate1 { ... behavior: url("/horizontal/menuh/cssmenu.htc"); }
  • If relative path is used, htc file path inside the CSS file should be relative to the page instead of the CSS file (this is unlike image links inside the CSS that are relative to the CSS file location). It is recommended to use the absolute path for the HTC file URL.
If you did not pass the testing in IE browsers, please read the following two posts:
  • Sub-menus are DIV elements with class="drop". By default each sub-menu is aligned with its parent LI element through the following CSS:
    .menuTemplate1 li:hover .drop { left: -1px; top: auto; }
    You can easily modify the alignment by changing the left and right style properties. For example, the submenu under the menu item "Web Menus" was added a class "dropToLeft"(class="drop decor2 dropToLeft") which is styled as:
    .menuTemplate1 li:hover .dropToLeft { left: auto; right: -1px; top: auto; }
    And the submenu under the menu item "Horizontal Web Menu" was added a class "dropToLeft2"(class="drop decor2 dropToLeft2") which is styled as:
    .menuTemplate1 li:hover .dropToLeft2 { left: auto; right: -60px; top: auto; }
  • The "position: relative;" inside CSS selector ".menuTemplate1 li" makes the submenu to drop down from the position of the opening link. If you want it to be positioned relative to the whole menu instead of the opening link (like the White House menu), remove the position: relative; from .menuTemplate1 li and add it into .menuTemplate1 selector.
  • All opening links should be assigned a class="arrow" so that it will show an arrow image indicating that a sub-menu is available.
  • If you want a top-level item to be aligned to the right, add a class "menuRight" to its container "LI" element. The last item of demo 2 below has been aligned to the right by this approach.
  • Add class "decor1" to the menu's root node (<ul class="menuTemplate1 decor1">), or add class "decor2" to its sub-menus (class="drop decor2") if special visual effects are required such as drop shadow, rounded borders, etc.
  • Each sub-menu should specify a proper width (e.g. <div class="drop decor2" style="width:360px;">)
License Fee: US$20.00
Buy License Now
  • A license is required before the CSS Menu goes to production. The license legally entitles you to deploy the HTC file to a single production site.
  • License is issued on a per-domain basis (valid for one domain and its sub-domains)
  • The license can be used by any Menucool horizontal menus (since Nov 18,2012): Drop Down Menu, Tab Menu or CSS Menu
  • The license is valid forever for future updates/upgrades with no requirement to renew
  • The acquired license should be embedded into the menu's HTML code as shown below. If the page is viewed with IE 8 or earlier, the menucss.htc file will use its own match pattern code to verify the license with the domain name on the browser's address bar. So the menucss.htc file itself will do the checking and no other external services will be involved. If the verification fails, the menu will periodically show a purchase reminder.
How to install the license
Add a license attribute to the root element of the menu, and set its value with the acquired license key:
<ul class="menuTemplate1" license="mylicense"> ...

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

more ...