在網站設計中，菜單是非常重要的一個元素，它可以方便用戶快速找到所需要的內容。而立體菜單是一種比較常見的菜單樣式，它能夠為網站增加一些立體感，讓用戶感覺更加真實。

.navbar {
background-color: #202020;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.menu-item {
color: #fff;
font-size: 16px;
cursor: pointer;
margin: 0 25px;
position: relative;
transform-style: preserve-3d;
perspective: 800px;
}
.menu-item::before,
.menu-item::after {
position: absolute;
content: '';
width: 100%;
height: 1px;
background-color: #fff;
transform-origin: left;
transform-style: preserve-3d;
transition: transform 0.3s ease;
}
.menu-item::before {
top: 0;
transform: rotateX(90deg);
}
.menu-item::after {
bottom: 0;
transform: rotateX(-90deg);
}
.menu-item:hover::before,
.menu-item:hover::after {
transform: rotateX(0deg);
}
.menu-item:hover {
transform: translateZ(15px);
}

上面的代碼實現了一個立體菜單。其中，.navbar是菜單欄的樣式，.menu-item是每個菜單項的樣式。它們都使用了flex布局來實現居中對齊，并且.menu-item還使用了preserve-3d屬性和perspective屬性實現了立體效果。同時，使用了::before和::after偽元素分別畫出了菜單項的上下兩條橫線，并在hover狀態下通過旋轉讓其展開，增加了交互性。