溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關如何使用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">
手機數碼<span class="triangle">▼</span></a>
<ul>
<li><a href="#" target="_blank">
手機 <span class="triangle">?</span>
</a>
<ul>
<li><a href="">小米</a></li>
<li><a href="">華為</a></li>
<li><a href="">魅族</a></li>
</ul>
</li>
<li><a href="">
電腦 <span class="triangle">?</span>
</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="">男裝女裝<span class="triangle">▼</span></a>
<ul>
<li><a href="">
上衣 <span class="triangle">?</span></a>
<ul>
<li><a href="">襯衫</a></li>
<li><a href="">T恤</a></li>
</ul>
</li>
<li><a href="">
褲子 <span class="triangle">?</span></a>
<ul>
<li><a href="">牛仔褲</a></li>
<li><a href="">休閑褲</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">運動戶外<span class="triangle">▼</span></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="">生活服務<span class="triangle">▼</span></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=""> 家居家紡<span class="triangle">▼</span></a>
<ul>
<li><a href="">
<span class="triangle">?</span> 床上用品</a>
<ul class="nav1">
<li><a href="">被子</a></li>
<li><a href="">枕頭</a></li>
</ul>
</li>
<li>
<a href=""><span class="triangle">?</span> 客廳家具</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>
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:1px solid gray;
margin-left: 10%;
margin-top:10px;
border-radius: 4px;
position: fixed;
}
ul.nav li{
float: left;
width: 9em;
background-color:yellowgreen;
}
ul.nav a{
display: block;
color: white;
line-height: 1.5em;
border-right: 1px solid white;
border-left: 1px solid white;
padding: 5px;
}
ul.nav a:hover,
ul.nav a:focus{
color: black;
background-color: #98FB98;
opacity: 0.5;
}
ul.nav li:first-child a{
border-left: 0;
border-bottom: 0;
}
ul.nav li:last-child a{
border-right: 0;
border-bottom: 0;
}
/*二級導航*/
ul.nav li ul{
width: 10em;
position: absolute;
left: -1000em;
}
ul.nav li:hover ul{
width: 10em;
left:auto;
}
ul.nav li ul a{
border-top: 1px solid white;
border-bottom: 1px solid white;
border-left: 0;
border-right: 0;
}
/*三級導航*/
ul.nav li:hover ul li ul{
width: 10em;
position: absolute;
left: -1000em;
}
ul.nav li:hover ul li:hover ul{
left: auto;
margin-left: 9.1em;
margin-top: -2.1em;
}
ul.nav li:hover ul li:hover ul.nav1{
left: auto;
margin-left: -9.1em;
margin-top: -2.1em;
}
感謝各位的閱讀！關于“如何使用html+css制作三級下拉菜單”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
