CSS里設置三級菜單可以讓網(wǎng)頁具有更好的視覺效果,也可以更方便地讓用戶瀏覽網(wǎng)站的不同頁面。
在CSS中,我們可以使用偽類來實現(xiàn)三級菜單的樣式。首先,我們需要定義一個基本的列表樣式:
ul { list-style: none; padding: 0; margin: 0; } li { display: inline-block; position: relative; } a { display: block; padding: 10px; text-decoration: none; color: #333; }
以上代碼定義了無序列表(ul)和列表項(li)的樣式,以及鏈接(a)的樣式。接下來,我們需要設置子菜單的樣式:
li ul { position: absolute; top: 100%; left: 0; display: none; } li:hover ul { display: block; } li li:hover ul { display: block; }
以上代碼定義了子菜單(ul)的樣式,其中,將它們的位置設置為相對于其父菜單項的底部,同時默認隱藏(display: none)。當鼠標懸停在菜單項上時,子菜單顯示(display: block)。當鼠標懸停在子菜單的菜單項上時,該子菜單的子菜單顯示(display: block)。
最后,我們需要定義三級菜單的樣式:
li li ul { position: absolute; top: 0; left: 100%; display: none; } li li:hover ul { display: block; }
以上代碼定義了第三級菜單的樣式,其中,將它們的位置設置為相對于其父菜單項的右側(cè),同時默認隱藏(display: none)。當鼠標懸停在第二級菜單的菜單項上時,第三級菜單顯示(display: block)。
通過以上的CSS樣式設置,我們可以輕松地實現(xiàn)三級菜單效果,使得網(wǎng)頁更加美觀和易于用戶使用。
上一篇css里的圖片設置大小
下一篇css里給a寫投影代碼