解开嵌套的无序列表并在IE/Chrome/FF中水平显示

Question

我一直在使用Google搜索一个星期左右，并且找不到适用于所有三种浏览器的解决方案。我试图找到一种方法来使用跨平台css水平输出嵌套的无序列表。

我已经将模拟了我想要做的事情：http://jsfiddle.net/gNqJb/如果您单击第1层和第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/

我非常感谢在使用Drupal的IE/Chrome/FF中修正这个布局的任何帮助。

在此先感谢您的帮助！

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;} 
    } 
} 

编辑：

好吧，我继续做它的jQuery了。缓慢的一天，我猜：

Fiddle here