CSS3中提供了一種新的特性，可以讓元素上下顯示。這個特性非常實用，尤其是在制作導航欄和菜單時經常用到。下面我們來看看如何實現這個功能。

代碼如下：
/* 設置容器的寬度和高度 */
.container {
width: 300px;
height: 300px;
}
/* 設置每個項目的樣式 */
.item {
width: 100%;
height: 50px;
background-color: #fff;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
/* 設置第一個項目的樣式 */
.item:first-child {
background-color: #f00;
}
/* 設置第二個項目的樣式 */
.item:nth-child(2) {
background-color: #0f0;
}
/* 設置第三個項目的樣式 */
.item:last-child {
background-color: #00f;
}
/* 鼠標放在項目上時的樣式 */
.item:hover {
transform: translateY(50px);
}

在這個例子中，我們首先定義了一個容器，接著用絕對定位的方式將項目放在容器的頂部。當鼠標放在項目上時，通過transform: translateY(50px)的方式讓項目向下移動50px，形成了上下顯示的效果。