直入主题，html+css制作三级下拉菜单实现代码分享给大家，具体内容如下
1.html代码
XML/HTML Code复制内容到剪贴板 <!DOCTYPE> <html> <head> <metacharset="utf-8"> <title>三级下拉菜单导航栏</title> <linkrel="stylesheet"type="text/css"href="style.css"> </head> <bodybgcolor="aliceblue"> <ulclass="nav"> <li> <ahref=""target="_blank"> 手机数码<spanclass="triangle">▼</span></a> <ul> <li><ahref="#"target="_blank"> 手机<spanclass="triangle">▶</span> </a> <ul> <li><ahref="">小米</a></li> <li><ahref="">华为</a></li> <li><ahref="">魅族</a></li> </ul> </li> <li><ahref=""> 电脑<spanclass="triangle">▶</span> </a> <ul> <li><ahref="">平板</a></li> <li><ahref="">笔记本</a></li> <li><ahref="">台式</a></li> </ul> </li> <li><ahref="">相机</a></li> </ul> </li> <li><ahref="">男装女装<spanclass="triangle">▼</span></a> <ul> <li><ahref=""> 上衣<spanclass="triangle">▶</span></a> <ul> <li><ahref="">衬衫</a></li> <li><ahref="">T恤</a></li> </ul> </li> <li><ahref=""> 裤子<spanclass="triangle">▶</span></a> <ul> <li><ahref="">牛仔裤</a></li> <li><ahref="">休闲裤</a></li> </ul> </li> </ul> </li> <li><ahref="">运动户外<spanclass="triangle">▼</span></a> <ul> <li><ahref="">运动鞋</a></li> <li><ahref="">运动服</a></li> <li><ahref="">运动设备</a></li> </ul> </li> <li> <ahref="">时尚百货</a> </li> <li><ahref="">生活服务<spanclass="triangle">▼</span></a> <ul> <li><ahref="">万能缴费</a></li> <ul> <li><ahref="">水费</a></li> <li><ahref="">电费</a></li> </ul> <li><ahref="">教育培训</a></li> <li><ahref="">话费充值</a></li> </ul> </li> <li> <ahref="">汇吃美食</a> </li> <li> <ahref="">家居家纺<spanclass="triangle">▼</span></a> <ul> <li><ahref=""> <spanclass="triangle">◀</span>床上用品</a> <ulclass="nav1"> <li><ahref="">被子</a></li> <li><ahref="">枕头</a></li> </ul> </li> <li> <ahref=""><spanclass="triangle">◀</span>客厅家具</a> <ulclass="nav1"> <li><ahref="">茶具</a></li> <li><ahref="">沙发</a></li> <li><ahref="">椅子</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
2.CSS 代码
CSS Code复制内容到剪贴板 *{ padding:0; margin:0; } ul{ list-style-type:none; } .triangle{ font-size:1em; color:white; } a{ text-decoration:none; text-align:center; font-weight:bold; } /*一级导航*/ ul.nav{ float:left; border:1pxsolidgray; margin-left:10%; margin-top:10px; border-radius:4px; position:fixed; } ul.navli{ float:left; width:9em; background-color:yellowgreen; } ul.nava{ display:block; color:white; line-height:1.5em; border-right:1pxsolidwhite; border-left:1pxsolidwhite; padding:5px; } ul.nava:hover, ul.nava:focus{ color:black; background-color:#98FB98; opacity:0.5; } ul.navli:first-childa{ border-left:0; border-bottom:0; } ul.navli:last-childa{ border-right:0; border-bottom:0; } /*二级导航*/ ul.navliul{ width:10em; position:absolute; left:-1000em; } ul.navli:hoverul{ width:10em; left:auto; } ul.navliula{ border-top:1pxsolidwhite; border-bottom:1pxsolidwhite; border-left:0; border-right:0; } /*三级导航*/ ul.navli:hoverulliul{ width:10em; position:absolute; left:-1000em; } ul.navli:hoverulli:hoverul{ left:auto; margin-left:9.1em; margin-top:-2.1em; } ul.navli:hoverulli:hoverul.nav1{ left:auto; margin-left:-9.1em; margin-top:-2.1em; }
以上就是本文的全部内容，欢迎大家学习完善。