在網(wǎng)頁設計中，經(jīng)常會用到列表來展示信息或者菜單選項。有時候，我們希望把列表項（<li>標簽）重疊顯示，以達到獨特的效果，這時候就需要運用CSS的一些技巧了。

ul {
position: relative;
list-style: none;
}
li {
position: absolute;
top: 0;
width: 100%;
opacity: 0;
transform: translateY(-100%);
transition: all 0.5s ease-in;
}
li:first-child {
opacity: 1;
transform: translateY(0);
}
ul:hover li {
opacity: 1;
transform: translateY(0);
transition: all 0.5s ease-out;
}

以上代碼首先將無序列表（<ul>標簽）的position設為relative，然后將每個列表項（<li>標簽）的position設為absolute，top設為0，width設為100%。接著，將每個列表項的opacity設為0，transform的translateY設為-100%。這樣，每個列表項就會完全隱藏，且會在父元素（無序列表）的左上角重疊顯示。

接下來，我們對第一個列表項進行樣式設置，將其opacity設為1，transform的translateY設為0。這樣，第一個列表項就會顯示出來，而其他列表項仍然處于隱藏狀態(tài)。

最后，我們在無序列表上應用:hover偽類，當鼠標懸浮在無序列表上時，將所有列表項的opacity設為1，transform的translateY設為0，同時添加一個過渡效果，讓所有列表項以動態(tài)的形式呈現(xiàn)出來。