javascript - 使用无序列表扩展 DIV

Question

我正在寻找一个无序列表来过滤我的一些工作。我的过滤器工作得很好(不是在这个例子中)，我现在正处于难以设计它的阶段。我试过设置 div 的宽度并进行一些在线研究但没有成功。

它目前看起来像这样:http://jsfiddle.net/XcVHU/

我希望的是最初只显示两个词(Filter 和 All)，当用户将鼠标悬停在或点击“Filter”这个词时，列表会通过 CSS 宽度转换展开以显示其他类别(网络、静态、运动和游戏)。所以，从这个:

过滤器 |所有

为此:

过滤器 |网页 |仍然 |运动 |游戏

Answer 1

如果你嵌套你的 ul 会更好，比如...

<div id="portfolionav">
    <ul class="filter">
        <li>Filter</li>
        <ul class="subfilters">
           <li class="web"><a href="#">Web</a></li>
           <li class="still"><a href="#">Still</a></li>
           <li class="motion"><a href="#">Motion</a></li>
           <li class="games"><a href="#">Games</a></li>
        </ul>
        <li class="current all"><a href="#">All</a></li>
    </ul>    
</div>​

过渡的 CSS 更改非常简单:

#portfolionav ul {
    display: inline-block;
    white-space: nowrap;
   -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;

}
#portfolionav ul ul {width: 0; opacity: 0;}

#portfolionav ul:hover > ul {width: 370px; opacity: 1;}

http://jsfiddle.net/jukUm/