позиционирование HTML элементы вложенного списка

Question

Рассмотрим следующий вложенный список:

<div > 
<ul class="main"> 
<li><a href="#">Fist item</a><ul class="ab"><li>a1</li><li>a2</li><li>a3</li><li>a4</li></ul> 
</li> 
<li><a href="#">Second item</a><ul class="ab"><li>b1</li><li>b2</li><li>b3</li><li>b4</li></ul></li> 
<li><a href="#">Third item</a><ul class="ab"><li>c1</li><li>c2</li><li>c3</li><li>c4</li></ul> 
</li> 
</ul> 
</div> 

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

#container {width:300px} 
main {width:200px;position:relative;} 
body > div > ul > li {display:block;float:left;padding:5px;} 
body > div > ul > li > a:hover + .ab {display:block;} 
.ab {display:none;clear:both;position:absolute;left:0px} 

Он отлично работает, если вы не изменить размер ширины контейнера в 200px (как вы можете попробовать на JSfiddle) (я должен добиться решения, работающего с разной шириной). В этом случае контейнер внутреннего уровня перекрывает внешний. Интересно, можно ли заставить внутренний контейнер отображаться после внешнего контейнера через css или решить эту проблему по-другому.

Редактировать: Мне нужно сделать мой вопрос более ясным, потому что ответы на них пока показывают одно и то же предложение у меня есть already. Поэтому я сделал небольшое добавление в стилях css, объявляющих окно для внутреннего контейнера (здесь обновление JSfiddle snippet). Ключевой проблемой является то, что мой пример игрушек имитирует левый столбец на более сложной веб-странице. Я заранее не знаю точную ширину такого столбца (может быть, 150 пикселей, может быть, 200 пикселей или что-то подобное), и я не знаю, в какой пропорции длина заголовков для внешних элементов списка. Мне нужно решение, которое работает на любую ширину, которую может иметь внешний контейнер.

Это скриншот того, что я получаю в случае по умолчанию:

Это то, что я получаю сужая внешний контейнер 200px (попробовать себя на JSfiddle):

и это именно то, что я хочу получить:

Я надеюсь, что теперь был мой вопрос.

Answer 1

U нужно сделать внешний уровень, расположенный в относительный и внутренний уровень, как абсолютные, так:

#container {width:300px} 
.ab { 
    display:none; 
    clear:both; 
    position:absolute; 
    left:0px 
} 
body > div > ul > li { 
    display:block; 
    float:left; 
    padding:5px; 
    position:relative; 
} 
body > div > ul > li > a:hover + .ab { 
    display:block; 
    position:absolute; 
    left:0; /* So it aligns to the left edge of outer level */ 
    top:100%; /* So inner level isn't overlaping outer */ 
} 
main {width:200px;position:relative;} 

Пример здесь: https://jsfiddle.net/d9fsff69/2/

Answer 2

Для обеспечения гибкости, убедитесь, что ширина не фиксирована. А остальное - вопрос разницы. Я добавил некоторый фон окраски для визуальной помощи:

Используйте этот CSS:

#container { 
    width: 100% 
} 
main { 
    width: 200px; 
    position: relative; 
} 

body > div > ul > li { 
    display: block; 
    float: left; 
    padding: 5px; 
    background:#999; 
} 

body > div > ul > li > a:hover + .ab { 
    display: block; 
    background:#ddd; 
    margin-top: 5px; 
} 

.ab { 
    display: none; 
    clear: both; 
    position: absolute; 
    left: 0px 
} 

Вот DEMO

Answer 3

Я бы просто дать вам похожий пример:

body { 
 
    margin: 0px; 
 
    font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
 
    font-size: 13px; 
 
    text-align: center; 
 
    background: #E3CAA1; 
 
} 
 
ul { 
 
    width: 100%; 
 
    text-align: center; 
 
    display: inline-block; 
 
    margin: 0px; 
 
    list-style: none; 
 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
 
    background: #000; 
 
    color: #fff; 
 
} 
 
ul li { 
 
    font: 12px/18px sans-serif; 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    position: relative; 
 
    padding: 20px 20px; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.2s; 
 
    -moz-transition: all 0.2s; 
 
    -ms-transition: all 0.2s; 
 
    -o-transition: all 0.2s; 
 
    transition: all 0.2s; 
 
} 
 
ul li:hover { 
 
    color: #71b51e; 
 
    background: #161616; 
 
} 
 
ul li ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 57px; 
 
    width: 140px; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    box-shadow: none; 
 
    display: none; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    -webkit-transiton: opacity 0.2s; 
 
    -moz-transition: opacity 0.2s; 
 
    -ms-transition: opacity 0.2s; 
 
    -o-transition: opacity 0.2s; 
 
    -transition: opacity 0.2s; 
 
} 
 
ul li ul li { 
 
    background: #161616; 
 
    display: block; 
 
    color: #fff; 
 
    text-align: left; 
 
    padding: 5px 15px; 
 
    height: 25px; 
 
} 
 
ul li ul li:hover { 
 
    background: #111; 
 
    color: #71b51e; 
 
} 
 
ul li:hover ul { 
 
    display: block; 
 
    opacity: 1; 
 
    visibility: visible; 
 
}

<ul> 
 
    <li>OPTION 
 
    <ul> 
 
     <li>SUB-1</li> 
 
     <li>SUB-2</li> 
 
     <li>SUB-3</li> 
 
     <li>SUB-3</li> 
 
    </ul> 
 
    </li> 
 
    <li>OPTION</li> 
 
    <li> 
 
    OPTION 
 
    <ul> 
 
     <li>SUB-1</li> 
 
     <li>SUB-2</li> 
 
     <li>SUB-3</li> 
 
     <li>SUB-3</li> 
 
    </ul> 
 
    </li> 
 
    <li>OPTION</li> 
 
</ul>