時間：2023-07-24 21:06:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-07-24 21:06:01 來源：網(wǎng)站運(yùn)營
利用html5+CSS制作簡易的下拉式導(dǎo)航菜單：
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; } nav{ width: 100%; height: 60px; background: #4a4a4a; }.title,#text1,#text2{ line-height: 60px; float: left; display: inline; color:#c3c3c3; width: 100px; text-align: center;}body{ background: white;}.title{ color: white; width: 120px; text-transform: uppercase; font-family:'Courier New', Courier, monospace;}#list1,#list2{ list-style: none; background: white; text-align: center; width: 120px; line-height: 60px; position: absolute; border-radius: 5px; z-index: -1; left: 112px; top: -120px;}#list2{ left :217px;}#text1:hover,#text2:hover{ color: whitesmoke; cursor: pointer;}#text1:hover ~ #list1,#text2:hover ~ #list2{ top: 60px; transition-duration: 0.5s;}#list1:hover,#list2:hover{ top: 60px; cursor: pointer;}.content1:hover,.content2:hover{ background: pink; border-radius: 5px; cursor: pointer;}b{ border-style: solid; border-width: 5px; border-color: wheat transparent transparent transparent; position: relative; top: 13px; left: 2px;} </style></head><body> <nav> <h1 class="title">design</h1> <ul> <li id="text1"> text1 <b></b> </li> <li id="text2"> text2 <b></b> </li> <ul id="list1"> <li class="content1">text1</li> <li class="content1">text1</li> <li class="content1">text1</li> </ul> <ul id="list2"> <li class="content2">text2</li> <li class="content2">text2</li> <li class="content2">text2</li> </ul> </ul> </nav></body></html>關(guān)鍵詞：導(dǎo)航,簡易,利用
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
