时间：2023-07-24 21:06:01 | 来源：网站运营
时间：2023-07-24 21:06:01 来源：网站运营
利用html5+CSS制作简易的下拉式导航菜单：
在线咨询
<!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>关键词：导航,简易,利用
