CSS 可以讓我們輕松實現二級菜單的滑動效果。下面是如何實現的:
/* HTML 代碼 */ <nav> <ul> <li><a>菜單 1</a> <ul> <li><a>二級菜單 1</a></li> <li><a>二級菜單 2</a></li> <li><a>二級菜單 3</a></li> </ul> </li> <li><a>菜單 2</a> <ul> <li><a>二級菜單 1</a></li> <li><a>二級菜單 2</a></li> <li><a>二級菜單 3</a></li> </ul> </li> </ul> </nav> /* CSS 代碼 */ nav ul { position: relative; list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin: 0 20px; } nav ul li a { display: inline-block; padding: 10px 20px; color: #fff; } nav ul li:hover >ul { display: block; } nav ul ul { position: absolute; top: 40px; left: -20px; display: none; width: 200px; padding: 10px; background-color: #333; } nav ul ul li { display: block; margin: 10px 0; } nav ul ul li a { display: block; padding: 5px; }
具體來說,我們給菜單和二級菜單添加一些樣式,以及使用:hover
選擇器控制二級菜單的顯示和隱藏。
其中nav ul li:hover > ul
的作用是在鼠標指向一級菜單的時候顯示它下面的二級菜單。同時,nav ul ul
作為二級菜單的樣式,可以讓它在一級菜單下方顯示,并設置了它的寬度和背景色。
以上就是如何用 CSS 實現二級菜單滑動效果的方法,你可以根據自己的需要進行調整。不過請記得,將 CSS 代碼寫在外部文件中,可以有效地減小 HTML 文件大小并增強網頁性能。
上一篇css讓元素不在同一行
下一篇css讓元素上下左右居中