Css 可以用div剪辑无序列表吗？

好的，我有这个：

<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

项目1
项目2
项目3

是否仍要设置div以剪辑列表项？我想将div的高度设置为20px，足以只显示列表中的第一项。。。悬停时，我会将高度更改为60像素左右，并显示所有其他选项…

这很简单：-）看一看我为你做的补偿。这里的关键是

溢出：hidden

属性；它会将内容剪辑到div的设置高度

HTML

<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

编辑 在

：hover

伪类中，我从@roryf获取了两个属性。谢谢你的提示。基本上，这意味着，如果您添加更多列表元素，则无论有多少个元素，该元素都将调整大小以适应需要。

这很简单：-）看看我为您做的弥补。这里的关键是

溢出：hidden

属性；它会将内容剪辑到div的设置高度

HTML

<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

编辑

---

在

：hover

伪类中，我从@roryf获取了两个属性。谢谢你的提示。基本上，这意味着，如果添加更多列表元素，则无论有多少个元素，该元素都将调整大小以适应需要。

您不需要为了自己的目的将列表元素剪裁到div中。只需使用javascript框架（例如jquery）要在悬停/鼠标悬停时显示/隐藏li元素

您不需要为了自己的目的而将列表元素剪裁到div中。只需使用javascript框架（例如jquery）在悬停/鼠标悬停时显示/隐藏li元素

我不会给：悬停样式一个固定高度，如果添加另一个列表项会怎么样你只需要更新CSS。我不会给：hover样式一个固定的高度，如果你添加另一个列表项呢您只需更新CSS即可。您甚至不需要jQuery，尽管对于奇特的滑动效果，它非常方便。@JamWaffles非常适合CSS3转换！是的，CSS3转换和动画ftw！您甚至不需要jQuery，尽管对于奇特的滑动效果，它非常方便。@JamWaffles对CSS3转换非常有用！是的，CSS3转换和动画ftw！

<style>
.clip {
    height:20px;
    overflow:hidden;
}
.clip:hover {
    height: auto;
    overflow: auto;
}
</style>

<div class="clip">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

.clip {
     -moz-transition: height 0.3s ease-out;  /* FF4+ */
       -o-transition: height 0.3s ease-out;  /* Opera 10.5+ */
  -webkit-transition: height 0.3s ease-out;  /* Saf3.2+, Chrome */
      -ms-transition: height 0.3s ease-out;  /* IE10? */
          transition: height 0.3s ease-out; 
}