You are viewing an old revision of this post, from September 25, 2012 @ 02:13:17. See below for differences between this version and the current revision.

Pure CSS Dropdowns for wp_nav_menu

This is bullet proof down to IE7- Yea! As used by WooThemes for their great work - check out this JS Fiddle. [html]<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>[/html] Just use this css: [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; } }[/css]

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

Revision Differences

September 25, 2012 @ 02:13:17Current Revision
Content
Deleted: This si bullet proof down to IE7- Yea! Added: This is bullet proof down to IE7- Yea!
 Added: As used by WooThemes for their great work - check out this <a href="http:// jsfiddle.net/ jameskoster/qSXdm/2/" target="_blank">JS Fiddle</a>.
 Added: <iframe style="width: 100%; height: 300px;" src="http://jsfiddle.net/ jameskoster/qSXdm/ 2/embedded/" frameborder="0" width="320" height="240"></iframe>
Unchanged: [html]&lt;ul class= &quot;menu&quot;&gt;Unchanged: [html]&lt;ul class= &quot;menu&quot;&gt;
Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Parent&lt;/a&gt;Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Parent&lt;/a&gt;
Unchanged: &lt;ul&gt;Unchanged: &lt;ul&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Child&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Child&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;
Unchanged: &lt;ul&gt;Unchanged: &lt;ul&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Grand Child&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Grand Child&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;
Unchanged: &lt;ul&gt;Unchanged: &lt;ul&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Grand Child&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Grand Child&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;
Unchanged: &lt;ul&gt;Unchanged: &lt;ul&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Great Grand Child&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Great Grand Child&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;Unchanged: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;
Unchanged: &lt;ul&gt;Unchanged: &lt;ul&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Great Great Grand Child&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Great Great Grand Child&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;/ul&gt;Unchanged: &lt;/ul&gt;
Unchanged: &lt;/li&gt;Unchanged: &lt;/li&gt;
Unchanged: &lt;/ul&gt;Unchanged: &lt;/ul&gt;
Unchanged: &lt;/li&gt;Unchanged: &lt;/li&gt;
Unchanged: &lt;/ul&gt;Unchanged: &lt;/ul&gt;
Unchanged: &lt;/li&gt;Unchanged: &lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;/ul&gt;Unchanged: &lt;/ul&gt;
Unchanged: &lt;/li&gt;Unchanged: &lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;/ul&gt;Unchanged: &lt;/ul&gt;
Unchanged: &lt;/li&gt;Unchanged: &lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;Unchanged: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
Unchanged: &lt;/ul&gt;[/html]Unchanged: &lt;/ul&gt;[/html]
Unchanged: Just use this css:Unchanged: Just use this css:
Unchanged: [css]ul.menu {Unchanged: [css]ul.menu {
Unchanged: position: relative;Unchanged: position: relative;
Unchanged: margin-bottom:0;Unchanged: margin-bottom:0;
Unchanged: li {Unchanged: li {
Unchanged: position: relative;Unchanged: position: relative;
Unchanged: float: left;Unchanged: float: left;
Unchanged: zoom:1;Unchanged: zoom:1;
Unchanged: list-style: none;Unchanged: list-style: none;
Unchanged: a {Unchanged: a {
Unchanged: display: block;Unchanged: display: block;
Unchanged: padding:.382em 1em;Unchanged: padding:.382em 1em;
Unchanged: background:#eee;Unchanged: background:#eee;
Unchanged: -webkit-box-sizing:  border-box;Unchanged: -webkit-box-sizing:  border-box;
Unchanged: -moz-box-sizing:  border-box;Unchanged: -moz-box-sizing:  border-box;
Unchanged: box-sizing: border-box;Unchanged: box-sizing: border-box;
Unchanged: }Unchanged: }
Unchanged: &amp;.parent { / / Styles applied to all parent list itemsUnchanged: &amp;.parent { / / Styles applied to all parent list items
Unchanged: &gt; a:after {Unchanged: &gt; a:after {
Unchanged: content:&quot; \2193&quot;;Unchanged: content:&quot; \2193&quot;;
Unchanged: line-height:1;Unchanged: line-height:1;
Unchanged: margin-left:1em;Unchanged: margin-left:1em;
Unchanged: float:right;Unchanged: float:right;
Unchanged: }Unchanged: }
Unchanged: }Unchanged: }
Unchanged: }Unchanged: }
Unchanged: /* CHILDREN */Unchanged: /* CHILDREN */
Unchanged: ul {Unchanged: ul {
Unchanged: width:10em;Unchanged: width:10em;
Unchanged: visibility: hidden;  // Optionally use display: none to avoid horizontal scrollbarsUnchanged: visibility: hidden;  // Optionally use display: none to avoid horizontal scrollbars
Unchanged: position: absolute;Unchanged: position: absolute;
Unchanged: top:100%;Unchanged: top:100%;
Unchanged: left: 0;Unchanged: left: 0;
Unchanged: z-index: 9999;Unchanged: z-index: 9999;
Unchanged: margin:0;Unchanged: margin:0;
Unchanged: li {Unchanged: li {
Unchanged: float: none;Unchanged: float: none;
Unchanged: a {Unchanged: a {
Unchanged: width: 100%;Unchanged: width: 100%;
Unchanged: display: inline-block;Unchanged: display: inline-block;
Unchanged: }Unchanged: }
Unchanged: &amp;.parent {Unchanged: &amp;.parent {
Unchanged: &gt; a:after {Unchanged: &gt; a:after {
Unchanged: content:&quot; \2192&quot;;Unchanged: content:&quot; \2192&quot;;
Unchanged: }Unchanged: }
Unchanged: }Unchanged: }
Unchanged: }Unchanged: }
Unchanged: }Unchanged: }
Unchanged: ul ul {Unchanged: ul ul {
Unchanged: left:100%;Unchanged: left:100%;
Unchanged: top:0;Unchanged: top:0;
Unchanged: }Unchanged: }
Unchanged: li:hover &gt; ul {Unchanged: li:hover &gt; ul {
Unchanged: visibility: visible;Unchanged: visibility: visible;
Unchanged: }Unchanged: }
Unchanged: }[/css]Unchanged: }[/css]

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: , ,

No comments yet.

Leave a Reply