HTML List Vertical Organization - html

Question

JSFiddle: http://jsfiddle.net/oj1vrjzh/12/
I'm trying to create a dropdown navbar that will first show sections, then display subsections once hovered on, all controlled by jquery. In the JSFiddle currently shown, the submenu covers the super sections:
<ul class="dropdown">
<li id="menu1" class="nav_menu">
Menu1
</li>
<ul class="submenu">
<li>ASDF</li> <!-- These cover up 'Menu2' -->
<li>ASDF</li>
<li>ASDF</li>
</ul>
<li id="menu2" class="nav_menu">
Menu2
</li>
</ul>
How do I change is so that when the submenu class is displayed, that it will bump the "nav_menu" classes down to the bottom of the submenu class?

Answer 1

I would suggest to try this one i adjusted for you:
Just simple and awesome!
Check this out live at codepen here!
Implementation:
HTML
<nav class="nav">
<ul>
<li>
Home
<ul>
<li>Sub Menu 1
<ul>
<li>Level 3 Menu 1
<ul>
<li>Level 4 Item 1</li>
<li>Level 4 Item 2</li>
</ul>
</li>
<li>Level 3 Menu 2</li>
</ul>
</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</nav>
CSS
$brand-primary: #fff;;
$text-color: grey;
nav {
font-family: Arial, sans-serif;
font-size: 18px;
line-height: 24px;
background: $brand-primary;
color: $text-color;
> ul {
list-style: none;
> li {
display: inline-block;
}
}
li {
position: relative;
&:hover {
background: mix(#000000, $brand-primary, 20%);
}
li:hover > a {
background: mix(#000000, $brand-primary, 30%);
}
}
a {
display: block;
padding: 10px 20px;
color: inherit;
text-decoration: none;
#include transition(all 0.3s);
}
// Submenu
.has-subnav {
> a {
padding-right: 30px;
position: relative;
&:after {
content: "·";
display: block;
font-family: sans;
font-size: 36px;
line-height: 0;
position: absolute;
right: 5px;
margin-right: 2px;
top: 22px;
}
}
}
ul ul {
width: 240px;
background: mix(#000000, $brand-primary, 20%);
position: absolute;
left: 0;
top: 100%;
ul {
left: 100%;
top: 0;
#include box-shadow(-1px 0 4px rgba(0,0,0,0.2));
}
}
// fade effect with css3
li {
& > ul {
visibility:hidden;
opacity:0;
#include transition(visibility 0s linear 0.1s, opacity 0.1s linear);
}
&.active {
> a {
}
& > ul{
visibility:visible;
opacity:1;
#include transition-delay(0s);
#include transition-duration(0.3s);
}
}
}
}
JAVASCRIPT
// navigation
$('.nav li:has(ul)')
.addClass('has-subnav')
.each(function(){
var $li = $(this)
, $a = $('> a', $li);
$a.on('mouseenter', function(){
$li.addClass('active');
});
$li.on('mouseleave', function(){
$li.removeClass('active');
});
});