使用无序列表扩展DIV

Question

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

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

我希望的是,最初只显示两个单词(过滤器和全部),当用户将鼠标悬停或单击"过滤器"时,列表会以CSS宽度过渡扩展以显示其他类别(Web,还是,动作和游戏).所以,从这个:

过滤| 所有

对此:

过滤| 网络| 还是| 动作| 游戏

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/