是否有可能使用div剪裁無序列表？

Question

好吧，我有這樣的：

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

反正是有設定的股利，以便它夾列表中的項目？我想將div的高度設置爲20px，足以僅顯示列表中的第一項...並且在懸停時，我會將高度更改爲大約60px，並顯示所有其他選項...

Answer 1

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

Answer 2

這很容易作爲餡餅:-)看看this fiddle我已經彌補了你。這裏的關鍵是overflow: hidden財產;它會將內容剪輯到div的設置高度。

HTML

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

CSS

div 
{ 
    height: 20px; 
    line-height: 20px; 
    overflow: hidden; 
    background: #76a7dc; 
} 

div:hover 
{ 
    height: auto; 
    overflow: auto; 
} 

編輯 在:hover僞類，我已經採取了從@roryf兩個屬性。謝謝你的提示。基本上，這意味着如果你添加更多的列表元素，元素將調整大小以適應不管你有多少。

Answer 3

你不需要夾在您的purpose.Just一個div列表元素使用JavaScript框架（ex.jquery）顯示懸停/鼠標移開