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:11:57
+++ Current Revision
+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>
+Added: [html]&lt;ul class= &quot;menu&quot;&gt;
+Added: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Parent&lt;/a&gt;
+Added: &lt;ul&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Child&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;
+Added: &lt;ul&gt;
+Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Grand Child&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;
+Added: &lt;ul&gt;
+Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Grand Child&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;
+Added: &lt;ul&gt;
+Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Great Grand Child&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li class= &quot;parent&quot;&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;
+Added: &lt;ul&gt;
+Added: &lt;li&gt;&lt; a href=&quot; #&quot;&gt;Great Great Great Grand Child&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;/ul&gt;
+Added: &lt;/li&gt;
+Added: &lt;/ul&gt;
+Added: &lt;/li&gt;
+Added: &lt;/ul&gt;
+Added: &lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;/ul&gt;
+Added: &lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;/ul&gt;
+Added: &lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;li&gt;&lt; a href=&quot;#&quot;&gt; Link&lt;/a&gt;&lt;/li&gt;
+Added: &lt;/ul&gt;[/html]
+Added: Just use this css:
+Added: [css]ul.menu {
+Added: position: relative;
+Added: margin-bottom:0;
+Added: li {
+Added: position: relative;
+Added: float: left;
+Added: zoom:1;
+Added: list-style: none;
+Added: a {
+Added: display: block;
+Added: padding:.382em 1em;
+Added: background:#eee;
+Added: -webkit-box-sizing:  border-box;
+Added: -moz-box-sizing:  border-box;
+Added: box-sizing: border-box;
+Added: }
+Added: &amp;.parent { / / Styles applied to all parent list items
+Added: &gt; a:after {
+Added: content:&quot; \2193&quot;;
+Added: line-height:1;
+Added: margin-left:1em;
+Added: float:right;
+Added: }
+Added: }
+Added: }
+Added: /* CHILDREN */
+Added: ul {
+Added: width:10em;
+Added: visibility: hidden;  // Optionally use display: none to avoid horizontal scrollbars
+Added: position: absolute;
+Added: top:100%;
+Added: left: 0;
+Added: z-index: 9999;
+Added: margin:0;
+Added: li {
+Added: float: none;
+Added: a {
+Added: width: 100%;
+Added: display: inline-block;
+Added: }
+Added: &amp;.parent {
+Added: &gt; a:after {
+Added: content:&quot; \2192&quot;;
+Added: }
+Added: }
+Added: }
-Deleted:
+Added: }
+Added: ul ul {
+Added: left:100%;
+Added: top:0;
+Added: }
+Added: li:hover &gt; ul {
+Added: visibility: visible;
+Added: }
+Added: }[/css]

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

Tags: css, dropdown, wp_nav_menu

Revisions

Revision Differences

No comments yet.

Leave a Reply Click here to cancel reply.