CSS - Горизонтальный список стилей без использования абсолютного позиционирования и JS

Question

Возможно ли создать меню в стиле horisontally (например, на изображении ниже) без использования абсолютного позиционирования или JS?

Пытается создать меню. Он отображает стандартный неупорядоченный список.

Вот что я пытаюсь достичь:

(. Зеленый список является подменю «Как ты?» Он имеет разрыв строки, потому что она ограничена по ширине.)

И в настоящее время, что у меня есть это:

Это перо: http://codepen.io/olegovk/pen/NNREMY

И код:

HTML

<nav> 
    <ul> 
    <li><a href="#">Hello</a></li> 
    <li><a href="#">How are you</a> 
     <ul> 
     <li><a href="#">Allright!</a></li> 
     <li><a href="#">And you?</a></li> 
     <li><a href="#">Fine</a></li> 
     <li><a href="#">La-la-la</a></li> 
     <li><a href="#">Bla-bla-bla</a></li> 
     <li><a href="#">Cheerio!</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Good bye</a></li> 
    </ul> 
</nav> 
<div class="clear"></div> 
<p>Some paragraph to make sure it's below the menu.</p> 

CSS

.clear { 
    clear: both; 
} 
p { 
    background-color: lightgrey; 
} 
li { 
    float: left; 
    list-style: none; 
    display: list-item; 
    margin: 0 0.5em; 
} 
li li { 
    margin: 0 1em; 
} 
li li a { 
    color: green; 
} 
nav ul ul{ 
    max-width: 300px; 
} 

Я знаю, что можно с абсолютно позиционирующих списки детей или с JS. Но абсолютное позиционирование дочерних списков выводит их из потока документов. В результате они пересекаются с содержанием ниже них. Также я не могу использовать JS.

Answer 1

Кажется, что это невозможно.

Вот еще один подобный вопрос: Position: absolute and parent height?

Что касается меню, чтобы достичь желаемого результата, единственным решением является меню верхнего уровня и подменю в различных списках. Таким образом, нет необходимости позиционировать подменю (список второго уровня) абсолютно.

Answer 2

для Ли Ли использования этого CSS стиль.

li li { 
margin: 0 1em; 
position:relative; 
left:-110px; 
} 

и дать идентификатор до свидания Ли, а затем записать его Css например

<li><a href="#" id='someId'>Good bye</a></li> 

li #someId{ 
    position:relative; 
    left:-150px; 

}