純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>