CSS左右折疊面板是一種常用的網頁布局，它可以輕松實現信息分類和展示。在下面的代碼示例中，我們將使用CSS中的偽類選擇器和HTML中的

標簽來創建一個簡單的左右折疊面板。

<ul>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a></li>
</ul>
<div id="panel1">
<p>面板1的內容</p>
</div>
<div id="panel2">
<p>面板2的內容</p>
</div>
<div id="panel3">
<p>面板3的內容</p>
</div>
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
ul li {
margin-right: 10px;
}
#panel1, #panel2, #panel3 {
display: none;
width: 100%;
}
#panel1.active, #panel2.active, #panel3.active {
display: block;
}
li:nth-child(1):hover ~ #panel1,
li:nth-child(2):hover ~ #panel2,
li:nth-child(3):hover ~ #panel3 {
display: block;
}
</style>

在上面的代碼中，我們使用了

標簽來創建一個水平的導航菜單，并使用CSS樣式對它進行了布局。我們還創建了3個
元素，分別代表每個面板的內容，并使用CSS樣式設置它們的寬度和隱藏。

接下來，我們使用CSS偽類選擇器: hover和nth-child來實現菜單項的懸停和面板的切換。在鼠標懸停在菜單項上時，我們使用~選擇器和相鄰的面板元素來顯示相應的面板。同時，對于面板元素，我們使用id選擇器和.active類來分別控制其隱藏和顯示。

總之，CSS左右折疊面板是一種非常實用的網頁布局技巧，在許多網站和應用程序中都得到了廣泛的應用。通過使用偽類選擇器和HTML標簽，它可以在不使用JavaScript的情況下輕松實現，并為用戶提供了更好的信息分類和展示體驗。

上一篇css左右滑動導航代碼
下一篇css左側彈出子菜單