CSS鏈接法二級下拉菜單是網頁設計中常見的一種導航方式。該菜單可以使網站導航更加清晰,使用戶更方便地查找所需內容。
/* CSS代碼 */ nav { background-color: #efefef; width: 100%; font-size: 0; } nav ul { margin: 0; padding: 0; list-style: none; } nav >ul >li { display: inline-block; position: relative; font-size: 14px; } nav >ul >li >a { display: block; padding: 10px 20px; color: #333; text-decoration: none; } nav >ul >li:hover >a { background-color: #ddd; } nav >ul >li ul { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; padding: 0; margin: 0; border: 1px solid #ddd; } nav >ul >li:hover ul { display: block; } nav >ul >li ul li { display: block; } nav >ul >li ul li a { display: block; padding: 10px 20px; color: #333; text-decoration: none; } nav >ul >li ul li:hover >a { background-color: #ddd; }
這段CSS代碼實現了一個基本的二級下拉菜單。其中,“nav”是外層容器,“ul”即菜單,“li”為菜單項,“a”為菜單鏈接,“ul ul”為二級菜單。
該菜單的特殊之處在于使用了CSS中的“display:none;”,在原有基礎上增加了“:hover”偽類實現懸浮下拉的效果。圖標的添加需要使用background-image;使用各種樣式美化等等。
如果想要實現單擊展開二級菜單的效果,只需在菜單鏈接中添加一個JavaScript事件即可。