纯html+css制作三级下拉菜单

2024-07-11 08:33:12

字体：大中小

来源：转载

供稿：网友

直入主题，html+css制作三级下拉菜单实现代码分享给大家，具体内容如下

1.html代码

XML/HTML Code复制内容到剪贴板

<!DOCTYPE> <html>
<head> <meta charset="utf-8">
<title>三级下拉菜单导航栏</title> <link rel="stylesheet" type="text/css" href="style.css">
</head> <body bgcolor="aliceblue">
<ul class="nav"> <li>
<a href="" target="_blank"> 手机数码▼</a>
<ul> <li><a href="#" target="_blank">
手机 ▶ </a>
<ul> <li><a href="">小米</a></li>
<li><a href="">华为</a></li> <li><a href="">魅族</a></li>
</ul> </li>
<li><a href=""> 电脑 ▶
</a> <ul>
<li><a href="">平板</a></li> <li><a href="">笔记本</a></li>
<li><a href="">台式</a></li> </ul>
</li> <li><a href="">相机</a></li>
</ul> </li>
<li><a href="">男装女装▼</a> <ul>
<li><a href=""> 上衣 ▶</a>
<ul> <li><a href="">衬衫</a></li>
<li><a href="">T恤</a></li> </ul>
</li> <li><a href="">
裤子 ▶</a> <ul>
<li><a href="">牛仔裤</a></li> <li><a href="">休闲裤</a></li>
</ul> </li>
</ul> </li>
<li><a href="">运动户外▼</a> <ul>
<li><a href="">运动鞋</a></li> <li><a href="">运动服</a></li>
<li><a href="">运动设备</a></li> </ul>
</li> <li>
<a href="">时尚百货</a> </li>
<li><a href="">生活服务▼</a> <ul>
<li><a href="">万能缴费</a></li> <ul>
<li><a href="">水费</a></li> <li><a href="">电费</a></li>
</ul> <li><a href="">教育培训</a></li>
<li><a href="">话费充值</a></li> </ul>
</li> <li>
<a href=""> 汇吃美食</a> </li>
<li> <a href=""> 家居家纺▼</a>
<ul> <li><a href="">
◀ 床上用品</a> <ul class="nav1">
<li><a href="">被子</a></li> <li><a href="">枕头</a></li>
</ul> </li>
<li> <a href="">◀ 客厅家具</a>
<ul class="nav1"> <li><a href="">茶具</a></li>
<li><a href="">沙发</a></li> <li><a href="">椅子</a></li>
</ul> </li>
</ul> </li>
</ul> </body>
</html>