Css垂直导航菜单重叠

Question

我正在尝试制作一个垂直菜单，悬停时有一个子菜单。我希望子菜单直接出现在悬停链接下方，并将剩余的菜单元素推到该子菜单下方。我如何使子菜单之后的元素在它之后被下推，因为使用我拥有的这段代码，它只是将子菜单显示在其余菜单元素的前面，使它们在菜单链接悬停时不可见。

它应该是这样的:

menu1
menu2
menu3
menu4

悬停在 menu2 上:

menu1
menu2
submenu1
submenu2
submenu3
submenu4
menu3
menu4

我的 HTML 代码:

<div class="menu">
<div class="main_menu"><a href="#">Link1</a></div>
<div class="main_menu"><a href="#">Link2</a>
<div class="submenu">
<div class="submenu_link"><a href="#">Submenu1</a></div>
<div class="submenu_link"><a href="#">Submenu2</a></div>
<div class="submenu_link"><a href="#">Submenu3</a></div>
<div class="submenu_link"><a href="#">Submenu4</a></div>
</div>
</div>
<div class="main_menu"><a href="#">Link3</a></div>
<div class="main_menu"><a href="#">Lin43</a></div>
</div>

还有我的CSS代码:

div.menu {
    height:100%;
    position:absolute;
    width:260px;
}

div.main_menu {
    height:50px;
    padding:12px 0 0 12px;
}

div.main_menu a {
     display:block;
     height:32px;
     padding-top:2px;
}

div.submenu {
    display:none;
}

div.main_menu:hover div.submenu {
    display:block;
    position:relative;
}

div.submenu_link {
    position: relative;
    height:35px;
    padding:4px 0 0 12px;
}

Answer 1

从这个类中删除高度

div.main_menu {
    /* height: 50px; */
    padding:12px 0 0 12px;
}

fiddle