Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Recursive Top Nav Inner Menus
<nav>
<menu>
<menuitem><a>Home</a></menuitem>
<menuitem>
<a>More</a>
<menu>
<menuitem>
<a>Even More</a>
<menu>
<menuitem>
<a>Wow that is deep</a>
<menu>
<menuitem><a>deep 1</a></menuitem>
<menuitem>
<a>deep 2</a>
<menu>
<menuitem><a>deep 1</a></menuitem>
<menuitem><a>deep 1</a></menuitem>
<menuitem>
<a>super deep</a>
<menu>
<menuitem>
<a>Not deep enough</a>
<menu>
<menuitem><a>deep 1</a></menuitem>
<menuitem>
<a>end of the line</a>
<menu>
<menuitem><a>deep 1</a></menuitem>
<menuitem>
<a>I lied</a>
<menu>
<menuitem>
<a>Wow that is deep</a>
<menu>
<menuitem><a>deep 1</a></menuitem>
<menuitem>
<a>deep 2</a>
<menu>
<menuitem><a>deep 1</a></menuitem>
<menuitem><a>deep 1</a></menuitem>
<menuitem>
<a>super deep</a>
<menu>
<menuitem>
<a>Not deep enough</a>
<menu>
<menuitem><a>deep 1</a></menuitem>
<menuitem>
<a>end of the line</a>
<menu>
<menuitem><a>deep 1</a></menuitem>
<menuitem>
<a>Seriously this time</a>
</menuitem>
</menu>
</menuitem>
</menu>
</menuitem>
</menu>
<menuitem>
</menu>
</menuitem>
</menu>
</menuitem>
<menuitem><a>Test</a></menuitem>
</menu>
</menuitem>
</menu>
</menuitem>
</menu>
</menuitem>
</menu>
<menuitem>
</menu>
</menuitem>
</menu>
</menuitem>
<menuitem><a>Test</a></menuitem>
</menu>
</menuitem>
<menuitem><a>about</a></menuitem>
<menuitem><a>help</a></menuitem>
</menu>
</menuitem>
</menu>
</nav>
body * {
margin:0;
padding:0;
}
nav > menu menuitem a {
white-space:nowrap;
display:block;
}
nav > menu {
border:1px solid red;
}
nav menu > menuitem {
display:inline-block;
position:relative;
background:#FFF;
}
nav menu menuitem:hover > a {
cursor:pointer;
background:#333;
color:#FFF;
}
nav > menu menuitem > menu {
opacity:0;
}
nav > menu menuitem:hover > menu:first-of-type{
opacity:1;
}
nav > menu menuitem > menu menuitem {
display:block;
}
nav > menu menuitem > menu {
border:1px solid blue;
position:absolute;
bottom:0px;
left:0px;
transform:translateY(100%);
}
nav > menu menuitem > menu menu {
transform:translateX(100%);
bottom:inherit;
left:inherit;
right:0px;
top:0px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment