二級菜單是網站設計中常見的功能,在CSS中設置二級菜單也很簡單。下面是一個簡單的示例:
/*設置菜單樣式*/ .nav { display: flex; justify-content: space-between; align-items: center; background-color: #333; color: #fff; padding: 10px; } .nav ul { display: flex; list-style: none; margin: 0; padding: 0; } .nav ul li { margin-right: 20px; } /*設置二級菜單樣式*/ .submenu { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3); z-index: 1; } .submenu li { display: block; padding: 10px; } /*鼠標懸停時顯示二級菜單*/ .nav ul li:hover .submenu { display: block; }
以上代碼中,我們使用了flex布局來設置菜單和子菜單的排列方式。對于子菜單,我們設置了position為absolute來將其定位在父元素下方,同時使用了display:none來默認隱藏子菜單,純CSS實現了鼠標懸停時顯示二級菜單的效果。
在HTML中,我們可以這樣設置菜單:
在li元素中嵌套一個ul元素來設置子菜單,并給其添加class為submenu,即可實現二級菜單的效果。
以上就是使用CSS設置二級菜單的方法,希望可以對你有所幫助。