CSS豎下拉菜單是常見的網站導航菜單之一,可以方便用戶快速找到所需的頁面。下面是一段CSS代碼,可以實現一個簡單的豎下拉菜單:
.nav { position: relative; } .nav >ul { list-style: none; padding: 0; margin: 0; } .nav li { position: relative; } .nav li ul { position: absolute; top: 100%; left: 0; display: none; } .nav li:hover ul { display: block; }
以上代碼中,.nav是菜單容器的class,ul是菜單項列表的標簽,li是菜單項的標簽。其中,.nav li ul是下拉菜單的樣式,使用position:absolute;將其脫離文檔流,并通過top:100%;和left:0;定位在菜單項下方。
在li標簽中使用:hover偽類,當鼠標懸停在菜單項上時,顯示下拉菜單,使用display:block;即可實現該效果。
使用該代碼,可以快速實現豎下拉菜單的效果。需要注意的是,菜單項的樣式可根據實際需求進行修改。
上一篇mysql安裝過程中暫停
下一篇mysql安裝過后不能用