CSS二級彈出菜單可以讓網頁菜單更加美觀和實用。我們可以通過以下代碼實現一個簡單的二級彈出菜單:
- 一級菜單1
- 一級菜單2
- 一級菜單3
首先,我們隱藏二級菜單,當一級菜單被懸停時,顯示相應的二級菜單:
.sub-menu { display: none; /* 隱藏二級菜單 */ } li:hover .sub-menu { display: block; /* 懸停時顯示 */ }
接下來,我們要定義一級菜單的位置,并使其成為相對定位。同時,我們還需要將二級菜單設置為絕對定位,這樣它們就可以在一級菜單的右側彈出:
li { position: relative; /* 一級菜單相對定位 */ } .sub-menu { position: absolute; /* 二級菜單絕對定位 */ left: 100%; /* 相對于一級菜單右側 */ top: 0; /* 與一級菜單頂部對齊 */ }
通過上述代碼,我們就可以輕松地實現一個簡單的CSS二級彈出菜單。歡迎大家在應用中嘗試使用。