純CSS側邊欄和一二級菜單是Web設計中常見的組件。它們可以幫助用戶更輕松地瀏覽網站,提高用戶體驗。下面是一些適用于您網站的CSS側邊欄和一二級菜單的示例代碼。
/* CSS樣式 */ .sidebar { width: 250px; height: 100%; background-color: #333; } .menu { list-style: none; padding: 0; margin: 0; } .menu li { position: relative; } .sub-menu { display: none; position: absolute; left: 100%; top: 0; width: 200px; background-color: #555; } .menu li:hover .sub-menu { display: block; } .sub-menu li { position: relative; } .sub-menu .sub-menu { display: none; position: absolute; left: 100%; top: 0; width: 200px; background-color: #777; } .sub-menu li:hover .sub-menu { display: block; }
在這個代碼示例中,我們有一個包含側邊欄和菜單的HTML代碼。一個無序列表(菜單)包含幾個列表項,每個列表項都有一個子菜單列表。鼠標懸停在列表項上時,該列表項的子菜單將顯示在右側。
以上代碼可以作為一個基本的側邊欄菜單。根據您的需求,您可以使用不同的顏色、樣式和設計定制它。