Правильное подменю, использующее только HTML + CSS

Я пытаюсь написать простое меню HTML + CSS без какого-либо абсолютного позиционирования или JS. Моя проблема связана с подменю, где он либо расширяет текущий выбранный элемент, либо вытесняет его:

проблема с подменю

HTML прост:

 

И CSS тоже:

 #menu, #menu ul { border-style: solid; border-width: 0px; border-top-width: 1px; float: left; list-style: none; margin: 0px; padding: 0px; width: 180px; } #menu li ul { background-color: cyan; display: none; position: relative; right: -168px; width: auto; } #menu li:hover ul { display: block; } #menu li { border-style: solid; border-width: 1px; border-top-width: 0px; padding: 10px; } #menu li:hover { background-color: lightgrey; font-weight: bold; } 

Я думал, что подменю может повлиять только на макет после его перемещения, что, похоже, не так. Я немного в недоумении.

Используя этот тип шаблона меню, вы должны использовать position:relative в родительском LI подменю и position:absolute в дочернем меню UL . Позволяет дочернему элементу отображаться вне streamа макета относительно его родителя.

Также неплохо поместить все непозиционные стили в A tag внутри каждого LI и использовать display:block . Вам было бы сложно стилизовать текст в «Папке 1» без него.

Простой пример: http://jsfiddle.net/Diodeus/jejNy/127/

Использовать position:absolute на ul и position:relative на LI:

HTML:

  

CSS:

 #menu, #menu ul { border-style: solid; border-width: 0px; border-top-width: 1px; float: left; list-style: none; margin: 0px; padding: 0px; width: 180px; } #menu li ul { background-color: cyan; display: none; position: absolute; top:-1px; left: 178px; } #menu li:hover ul { display: block; } #menu li { position:relative; border-style: solid; border-width: 1px; border-top-width: 0px; padding: 10px; } #menu li:hover { background-color: lightgrey; font-weight: bold; } 

Проверьте это CodePen