Горизонтальное, двухуровневое меню навигации в CSS

Question

Я создаю двухуровневое меню навигации для веб-сайта. Оба уровня всегда будут видны.

Моя проблема: Я хотел бы

• Уже 1-го и 2-го уровня меню по горизонтали, занимая одну строку каждый
• левой выравнивать меню нижнего уровня с пунктом меню активного первого уровня
• не имеют меню подуровень раздвинуть остальные пункты 1-й уровень меню справа

Детская ASCII искусство иллюстрации:

AAA BBBBBB CC DDD [1st level, B selected] 
    aa bbb ccccc [2nd level, options of B visible] 

CSS:

.nav, .nav ul {list-style-type:none; margin:0; padding:0; float:left;} 
.navl ul li ul li {} 
.nav {margin-bottom:-1px;margin-right:-1px;} 

.nav a {float:left; line-height:16px; padding:4px 0; border:1px solid #fff; margin-bottom:-1px;} 

.nav ul {position:relative; clear:left;} 
.nav ul li {float:left; clear:left;} 
.nav a {position:relative;} 

.sub-li a {margin-right:0;} 

HTML:

<ul class="nav"> 
    <li><a href="#url">Home</a></li> 
</ul> 
<ul class="nav"> 
    <li class="sub-li"><a class="sub-a" href="#url">Library</a> 
     <ul> 
      <li><a href="#url">Opening hours</a></li> 
      <li><a href="#url">Librarians</a></li> 
      <li><a href="#url">Geeks</a></li> 
     </ul> 
    </li> 
</ul> 
<ul class="nav"> 
    <li><a href="#url">About us</a></li> 
</ul> 

В этом примере, я не могу даже получить меню уровня горизонталь 2nd. Но я уже вижу, что длинные заголовки в меню 2-го уровня нажимают на последний пункт меню «1» у нас справа, что выглядит уродливо.

Любая помощь очень ценится!

Answer 1

Ключом к тому, чтобы не надавливать на 1-й уровень, является положение: абсолютное; left: 0; на уровне 2-го уровня. Вам нужно будет добавить позицию: relative; to li.sub-li