CSS Menus v2 (with some help from jQuery)

The following dynamic menu examples are driven completely by CSS and work in all modern browsers*.

CSS Menus v2 Features

• Up to 3 sub menus
• Hover Persistence
• Uses jQuery for IE fixes

Horizontal Example

• Home
• Work +
  • Websites +
    • qrayg.com
    • craigerskine.com
    • dt.qrayg.com
    • legendofmana.info
  • Sketchbook
  • Free Interfaces
• Learn +
  • Fireworks +
    • Aqua Button
    • Aqua Button 2
    • Water Drop
    • Light FX
    • Light FX2
  • CSS +
    • CSS Menus
    • Sprite Nav
    • @import
• Contact

• View the Horizontal CSS

  /* Author: Craig Erskine Description: Dynamic Menu System - Horizontal/Vertical */ ul#navmenu-h { margin: 0; padding: 0; list-style: none; position: relative; } ul#navmenu-h ul { width: 160px; /* Sub Menu Width */ margin: 0; list-style: none; display: none; position: absolute; top: 100%; left: 0; } ul#navmenu-h ul ul,ul#navmenu-h ul ul ul { top: 0; left: 100%; } ul#navmenu-h li { float: left; display: inline; position: relative; } ul#navmenu-h ul li { width: 100%; display: block; } /* Root Menu */ ul#navmenu-h a { border-top: 1px solid #FFF; border-right: 1px solid #FFF; padding: 6px; float: left; display: block; background: #DDD; color: #666; font: bold 11px Arial, sans-serif; text-decoration: none; height: 1%; } /* Root Menu Hover Persistence */ ul#navmenu-h a:hover,ul#navmenu-h li:hover a,ul#navmenu-h li.iehover a { background: #BBB; color: #FFF; } /* 2nd Menu */ ul#navmenu-h li:hover li a,ul#navmenu-h li.iehover li a { float: none; background: #BBB; } /* 2nd Menu Hover Persistence */ ul#navmenu-h li:hover li a:hover,ul#navmenu-h li:hover li:hover a,ul#navmenu-h li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover a { background: #999; } /* 3rd Menu */ ul#navmenu-h li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li a { background: #999; } /* 3rd Menu Hover Persistence */ ul#navmenu-h li:hover li:hover li a:hover,ul#navmenu-h li:hover li:hover li:hover a,ul#navmenu-h li.iehover li.iehover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover a { background: #666; } /* 4th Menu */ ul#navmenu-h li:hover li:hover li:hover li a,ul#navmenu-h li.iehover li.iehover li.iehover li a { background: #666; } /* 4th Menu Hover */ ul#navmenu-h li:hover li:hover li:hover li a:hover,ul#navmenu-h li.iehover li.iehover li.iehover li a:hover { background: #333; } /* Hover Function - Do Not Move */ ul#navmenu-h li:hover ul ul,ul#navmenu-h li:hover ul ul ul,ul#navmenu-h li.iehover ul ul,ul#navmenu-h li.iehover ul ul ul { display: none; } ul#navmenu-h li:hover ul,ul#navmenu-h ul li:hover ul,ul#navmenu-h ul ul li:hover ul,ul#navmenu-h li.iehover ul,ul#navmenu-h ul li.iehover ul,ul#navmenu-h ul ul li.iehover ul { display: block; }

• View the JavaScript (for IE)

  $(document).ready(function(){ $("#navmenu-h li,#navmenu-v li").hover( function() { $(this).addClass("iehover"); }, function() { $(this).removeClass("iehover"); } ); });

Vertical Example

• Home
• Work +
  • Websites +
    • qrayg.com
    • craigerskine.com
    • dt.qrayg.com
    • legendofmana.info
  • Sketchbook
  • Free Interfaces
• Learn +
  • Fireworks +
    • Aqua Button
    • Aqua Button 2
    • Water Drop
    • Light FX
    • Light FX2
  • CSS +
    • CSS Menus
    • Sprite Nav
    • @import
• Contact

• View the Vertical CSS

  /* Author: Craig Erskine Description: Dynamic Menu System - Vertical */ ul#navmenu-v,ul#navmenu-v li,ul#navmenu-v ul { width: 160px; /* Menu Width */ margin: 0; list-style: none; } ul#navmenu-v li { float: left; position: relative; width: 100%; } ul#navmenu-v li.iehover { z-index: 1000; /* IE z-index bugfix */ } ul#navmenu-v ul { display: none; position: absolute; top: 0; left: 100%; z-index: 9999; } /* Root Menu */ ul#navmenu-v a { border-top: 1px solid #FFF; border-right: 1px solid #FFF; padding: 6px; display: block; background: #DDD; color: #666; font: bold 11px Arial, sans-serif; text-decoration: none; height: 1%; } /* Root Menu Hover Persistence */ ul#navmenu-v a:hover,ul#navmenu-v li:hover a,ul#navmenu-v li.iehover a { background: #BBB; color: #FFF; } /* 2nd Menu */ ul#navmenu-v li:hover li a,ul#navmenu-v li.iehover li a { float: none; background: #BBB; } /* 2nd Menu Hover Persistence */ ul#navmenu-v li:hover li a:hover,ul#navmenu-v li:hover li:hover a,ul#navmenu-v li.iehover li a:hover,ul#navmenu-v li.iehover li.iehover a { background: #999; } /* 3rd Menu */ ul#navmenu-v li:hover li:hover li a,ul#navmenu-v li.iehover li.iehover li a { background: #999; } /* 3rd Menu Hover Persistence */ ul#navmenu-v li:hover li:hover li a:hover,ul#navmenu-v li:hover li:hover li:hover a,ul#navmenu-v li.iehover li.iehover li a:hover,ul#navmenu-v li.iehover li.iehover li.iehover a { background: #666; } /* 4th Menu */ ul#navmenu-v li:hover li:hover li:hover li a,ul#navmenu-v li.iehover li.iehover li.iehover li a { background: #666; } /* 4th Menu Hover */ ul#navmenu-v li:hover li:hover li:hover li a:hover,ul#navmenu-v li.iehover li.iehover li.iehover li a:hover { background: #333; } /* Hover Function - Do Not Move */ ul#navmenu-v li:hover ul ul,ul#navmenu-v li:hover ul ul ul,ul#navmenu-v li.iehover ul ul,ul#navmenu-v li.iehover ul ul ul { display: none; } ul#navmenu-v li:hover ul,ul#navmenu-v ul li:hover ul,ul#navmenu-v ul ul li:hover ul,ul#navmenu-v li.iehover ul,ul#navmenu-v ul li.iehover ul,ul#navmenu-v ul ul li.iehover ul { display: block; }

• View the JavaScript (for IE)

  $(document).ready(function(){ $("#navmenu-h li,#navmenu-v li").hover( function() { $(this).addClass("iehover"); }, function() { $(this).removeClass("iehover"); } ); });

* Internet Explorer is the exception, of course. IE 6 requires some "hover" help, and IE 7 retains some z-index bugs. Thankfully, both can be fixed with a couple lines of JavaScript and tiny bit of CSS.