This is bullet proof down to IE7- Yea!
As used by WooThemes for their great work – check out this JS Fiddle.
<ul class="menu"> <li class="parent"><a href="#">Parent</a> <ul> <li><a href="#">Child</a></li> <li class="parent"><a href="#">Link</a> <ul> <li><a href="#">Grand Child</a></li> <li class="parent"><a href="#">Link</a> <ul> <li><a href="#">Great Grand Child</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="parent"><a href="#">Link</a> <ul> <li><a href="#">Great Great Grand Child</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="parent"><a href="#">Link</a> <ul> <li><a href="#">Great Great Great Grand Child</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul>
Just use this css:
ul.menu { position: relative; margin-bottom:0; li { position: relative; float: left; zoom:1; list-style: none; a { display: block; padding:.382em 1em; background:#eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } &.parent { // Styles applied to all parent list items > a:after { content:"\2193"; line-height:1; margin-left:1em; float:right; } } } /* CHILDREN */ ul { width:10em; visibility: hidden; // Optionally use display:none to avoid horizontal scrollbars position: absolute; top:100%; left: 0; z-index: 9999; margin:0; li { float: none; a { width: 100%; display: inline-block; } &.parent { > a:after { content:"\2192"; } } } } ul ul { left:100%; top:0; } li:hover > ul { visibility: visible; } }
Revisions
- September 25, 2012 @ 02:14:53 [Current Revision] by PeterLugg
- September 25, 2012 @ 02:13:17 by PeterLugg
- September 25, 2012 @ 02:11:57 by PeterLugg
No comments yet.