色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css鏈接法二級下拉菜單

劉柏宏1年前6瀏覽0評論

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事件即可。