Распаковка вложенных неупорядоченных списков и отображение по горизонтали в IE/Chrome/FF

Question

Я занимаюсь поиском в течение примерно недели, и я не могу найти решение, которое работает во всех трех браузерах. Я пытаюсь найти способ вывода вложенных неупорядоченных списков по горизонтали, используя кросс-платформенный css.

Я собрал макет того, что я пытаюсь сделать здесь: http://jsfiddle.net/gNqJb/ Если вы нажмете на блоки Tier1 и Tier 2 (меню начинает расширяться, так что вам нужно будет сделать это сначала), вы увидите функциональность, которую я хочу. Идея состоит в том, что если вы нажмете на заголовок меню, он расширит подменю горизонтально рядом с заголовком. Проблема с этим кодом заключается в том, что подменю размещаются вне блока элементов списка (< .li>). Кроме того, он не работает в IE вообще. В этом примере все с именем * в имени является блоком заголовка.

Поскольку я работаю с Drupal, я застрял с его меню, которые выводятся так:

<ul class="menu"> 
    <li class="first expanded"><a href="#" class="active">Home</a> 
     <ul class="menu"> 
      <li class="first last leaf"><a href="#" class="active">Test</a></li> 
     </ul> 
    </li> 
    <li class="first expanded"><a href="#" class="active">Home</a> 
     <ul class="menu"> 
      <li class="first last leaf"><a href="#" class="active">Test</a></li> 
     </ul> 
    </li> 
    <li class="first expanded"><a href="#" class="active">Home</a> 
     <ul class="menu"> 
      <li class="first last leaf"><a href="#" class="active">Test</a></li> 
     </ul> 
    </li> 
    <li class="first expanded"><a href="#" class="active">Home</a> 
     <ul class="menu"> 
      <li class="first last leaf"><a href="#" class="active">Test</a> 
       <ul class="menu"> 
        <li class="first last leaf"><a href="#" class="active">Test</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="last leaf"><a href="#" class="active">Test Outside</a></li> 
</ul> 

Когда я применить форматирование к нему, я получаю это: http://jsfiddle.net/C2eU4/

Я был бы очень признателен за любую помощь в том, чтобы этот макет был исправлен для использования в IE/Chrome/FF с Drupal.

Заранее благодарим за помощь, которую вы можете дать ребятам!

Answer 1

Ну, у меня есть чистое решение для CSS, которое должно по крайней мере дать вам понять, как это должно работать. Суть в том, что анимация будет работать только в браузерах webkit.

Fiddle here

Вот соответствующие изменения в вашем CSS:

li ul { 
    width:0px; 
    position: absolute; 
    left:100%; 
    top: -1px; 
    overflow:hidden; 
    -webkit-animation-name: slide; 
    animation-name: slide; 
    -webkit-animation-duration: .5s; 
    animation-duration: .5s; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
    -webkit-animation-direction: reverse; 
    animation-direction: reverse; 
} 
li + li{ 
    -webkit-animation-name: push; 
    animation-name: push; 
    -webkit-animation-duration: .5s; 
    animation-duration: .5s; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
    -webkit-animation-direction: reverse; 
    animation-direction: reverse; 
} 
li:hover ul { 
    -webkit-animation-name: slide; 
    animation-name: slide; 
    -webkit-animation-duration: .5s; 
    animation-duration: .5s; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
    -webkit-animation-direction: normal; 
    animation-direction: normal; 
    display:inline-block; 
    width: 100px; 
} 
li:hover + li { 
    -webkit-animation-name: push; 
    animation-name: push; 
    -webkit-animation-duration: .5s; 
    animation-duration: .5s; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
    -webkit-animation-direction: normal; 
    animation-direction: normal; 
    margin-left: 100px; 
} 
@-webkit-keyframes slide{ 
    from { 
    width: 0px; 
    } 
    to { 
    width: 100px; 
    } 
} 
@-webkit-keyframes push{ 
    from { 
    margin-left:0px;} 
    to { 
    margin-left:100px;} 
    } 
} 

EDIT:

Хорошо, я пошел вперед и сделал это для JQuery тоже. Медленный день, я думаю:

Fiddle here