Блог

Я пытаюсь создать вертикальное меню с подменю при наведении курсора мыши. Я хочу, чтобы подменю отображалось непосредственно под наведенной ссылкой, а остальные элементы меню помещались под этим подменю. Как мне сделать так, чтобы элементы после подменю были сдвинуты вниз после него, потому что с помощью этого кода, который у меня есть, он просто отображает подменю перед остальными элементами меню, делая их невидимыми при наведении курсора мыши на ссылку меню.

Это должно выглядеть так:

 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;
}
  

Удалите высоту из этого класса

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

скрипка

Все, что вам нужно сделать, это добавить несколько вещей к вашему div.main_menu в CSS

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

СКРИПКА: http://jsfiddle.net/2bEZF /