CSS列表展開與收起是頁面布局中經常用到的一種技術，在此介紹一些實現方法。

/*首先是利用偽類的方法*/
ul li ul{
display: none;
}
ul li:hover >ul{
display: block;
}

利用偽類的方法可以很好地展開和收起列表，可是更好的方式還有：

/* 利用 CSS3 的過渡效果 */
ul li ul{
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
ul li:hover >ul {
height: auto;
}

利用CSS3的過渡效果對于列表的展開和收起效果更加細膩，無需JS的介入，提高頁面的響應速度。

除了以上兩種方法外，還可以使用jQuery來實現：

/* 利用jQuery實現展開和收起 */
$('ul li').children('ul').hide();
$('ul li:has(ul)').click(function(event){
if (this === event.target) {
$(this).children('ul').slideToggle();
}
});

以上三種方法都能實現CSS列表的展開與收起，根據自己的需求來選擇即可。