У меня есть эта структура меню: (внутренний <ul> может быть окружен пользовательским <div> , любые другие структурные изменения намного сложнее, потому что код создается из динамической модульной системы, написанной на PHP)
<div id="menu"> <div class="body-menu"> <ul> <li class="current"><div class="body-menu"> <a href="bla">Item1</a> <ul> <li class="current"><div class="body-menu"> <a href="bla">Sub-Item 1</a> </div></li> <li class=""><div class="body-menu"> <a href="bla">Sub-Item 2</a> </div></li> </ul> </div></li> <li class=""><div class="body-menu"> <a href="bla">Item 2</a> </div></li> </ul> </div> <div class="menu-background"></div> </div>
Цель состоит в том, чтобы отобразить внутренний <ul> после пункта 1 с левой стороны в качестве подменю, а не сверху с другими элементами верхнего уровня.
Есть ли способ сделать это без изменения структуры? Просто с CSS или так?
Спасибо за ответы на все вопросы!
особенно для besluitloos и Caelea, это именно то, что я ищу.
Родительский <li> содержащий второй <ul> должен быть расположен относительно, а содержащаяся <ul> должна быть абсолютной.
Сопоставление:
ul li { position: relative ;} ul li ul {position: absolute; top: 0; left: 145px;}
Я написал left: 145px но вы можете дать любое значение, которое вы хотите, в зависимости от того, насколько вы хотите, чтобы ваше меню было.
PS: Совет. Не используйте одно и то же поле «body-menu» на тех divs, которые должны быть разными для большого контейнера, и не только. И я действительно не думаю, что нужно иметь этот div внутри этих < li > .
Возможно, вы хотите сделать что-то вроде скрытия подменю и заставить его всплывать или отображаться, когда мышь витает. Взгляните на http://cssmenumaker.com/builder/42231 для примера.
.body-menu > ul > li { position:relative; float:left; padding-bottom: 1em; } .body-menu ul ul { position:absolute; left:0; top:1.3em; display:none; } .body-menu > ul > li:hover > ul { display:block; }направо.body-menu > ul > li { position:relative; float:left; padding-bottom: 1em; } .body-menu ul ul { position:absolute; left:0; top:1.3em; display:none; } .body-menu > ul > li:hover > ul { display:block; }
Это то, что вы ищете?
EDIT: Извините, IE не играет хорошо с встроенным блоком. Поэтому вам придется изменить это на «inline». Затем вы можете оставить нижнюю прокладку, потому что это не работает на встроенном элементе. За исключением того, что вы плаваете элемент. отредактировал код выше для работы с float.
edit 2: опечатка.