Сделать другие элементы li обертываются, когда увеличивается высота элемента li

Question

Я работаю над выпадающим меню. Проблема в том, что у меня есть 3 уровня <ul>, а на втором уровне, когда высота <li> увеличивается, потому что она вмещала еще один <ul>, тогда все остальные <li> второго уровня не обворачивают его.

Вы можете представить себе ситуацию в этой Fiddle

при наведении указателя мыши на Technology, то вы могли бы видеть, что размер Веб-дизайн<li> больше из-за другого <ul>, что она вмещающей , из-за этого Типография и Передняя часть опустилась ниже. Есть ли способ удержать их?

Html структура такова:

<nav id="nav" role="navigation"> 
<ul class="clearfix"> 
    <li> <a href="?work"><span>Technology</span></a> 
     <ul> 
      <li><a href="#">Hot news</a></li> 
      <li><a href="#">Sad news</a></li> 
      <li><a href="#">Normal news</a></li> 
      <li><a href="?webdesign">Web Design</a> 
       <ul> 
        <li><a href="#">Super power</a> 
        </li> 
        <li><a href="#">Aim Gain</a> 
        </li> 
        <li><a href="#">Acheivers</a> 
        </li> 
        <li><a href="#">Lackers</a></li> 
       </ul> 
      </li> 
      <li><a href="?typography">Typography</a> 
      </li> 
      <li><a href="?frontend">Front-End</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="?about">Personal Stuff</a> 
    </li> 
</ul> 

EDIT: Прикрепление несколько скриншотов Это изображение показывает настоящую проблему, смотрите положение о Типографика и Фронтальный

Следующего изображения показывает, что я пытаюсь достичь, см позиции Типографики и Фронтального

Answer 1

Здесь вы идете: JSFiddle

UPD: JSFiddle in acc to screenshot (Нужно для обновления правил CSS)

UPD: JSFiddle example based on classes

Я просто удалил margin-left:20px; на #nav li ul li > ul

Испытано на Safari 6.1 (Mac OS X 10.9) | UPD: дополнительно протестирован на Chrome (30) & FF (23.0.1) под Mac OS X 10.9