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

Answer 2

你所要做的就是给你添加一些东西＆div; main.men_menu＆＃39;在CSS

div.main_menu {
//height:50px; /* remove */
padding:12px 0 0 12px;
overflow: auto; /* new */
display: block; /* new */
}

FIDDLE：http://jsfiddle.net/2bEZF/

Css垂直导航菜单重叠

2 个答案: