css三級下拉菜單實現(xiàn)的方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 18:48:03

css三級下拉菜單實現(xiàn)的方法

css三級下拉菜單實現(xiàn)的方法:這篇文章主要介紹的內(nèi)容是關(guān)于css三級下拉菜單實現(xiàn)的方法，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下<!DOCTYPE html> <html> <head> <title>test</title> <style typ

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀css三級下拉菜單實現(xiàn)的方法:這篇文章主要介紹的內(nèi)容是關(guān)于css三級下拉菜單實現(xiàn)的方法，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下<!DOCTYPE html> <html> <head> <title>test</title> <style typ

這篇文章主要介紹的內(nèi)容是關(guān)于css三級下拉菜單實現(xiàn)的方法，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type = "text/css">
/*設(shè)置通配符樣式*/ 
*{
 margin:0; 
 padding:0;
}
body{
 font-size:12px;
}
ul{
 list-style:none;
}
a{
 text-decoration:none;
}</p>
<p>/*設(shè)置二級導(dǎo)航樣式*/ 
.nav {
 width:500px; 
 height:30px;
 background-color:#b4b4b4;
 /*導(dǎo)航欄居中*/
 margin:auto;
}
.nav ul li { 
 width:100px; 
 height:30px; 
 float:left; 
 position:relative;
}
.nav ul li a {
 display:block;
 width:96px; 
 border:2px solid gray; 
 height:26px; 
 line-height:26px; 
 text-align:center;
}
.nav ul li a:hover { 
 background-color:yellow;
}</p>
<p>/*設(shè)置一級導(dǎo)航樣式*/
.nav ul li ul{
 display:none;
}
.nav ul li:hover ul{
 display:block;
 width:100px;
 position:absolute;
 top:30px;
 left:0;
 background-color:white;
}
.nav ul li:hover ul li a{
 display:block;
 width:96px;
 height:26px;
 line-height:26px;
 border:2px solid gray;
 text-align:center;
}
.nav ul li:hover ul li a:hover{
 background-color:orange;
}</p>
<p>/*設(shè)置三級導(dǎo)航樣式*/
.nav ul li:hover ul li ul { 
 display:none;
}
.nav ul li:hover ul li:hover ul{ 
 display:block; 
 width:100px; 
 position:absolute; 
 top:0px; 
 left:100px;
 background-color:#b4b4b4;
}
.nav ul li:hover ul li:hover ul li { 
 width:100px; 
 height:30px; 
}
.nav ul li:hover ul li:hover ul li a { 
 display:block; 
 width:96px; 
 height:26px; 
 line-height:26px; 
 border:2px solid gray; 
 text-align:center; 
}
.nav ul li:hover ul li:hover ul li a:hover { 
 background-color:#00CC00;
}
.nav ul li:hover ul .nav_jw ul { 
 display:none;
}
.nav ul li:hover ul .nav_jw:hover ul{ 
 display:block; 
 width:100px; 
 position:absolute; 
 top:0px; 
 left:-100px;
 background-color:#b4b4b4;
}
.nav ul li:hover ul .nav_jw:hover ul li { 
 width:100px; 
 height:30px; 
}
.nav ul li:hover ul .nav_jw:hover ul li a { 
 display:block; 
 width:96px; 
 height:26px; 
 line-height:26px; 
 border:2px solid gray; 
 text-align:center; 
}
.nav ul li:hover ul .nav_jw:hover ul li a:hover { 
 background-color:#00CC00;
}</p>
<p></style>
</head>
<body>
<p class = "nav">
<ul>
<li><a href = "#">一級導(dǎo)航</a>
 <ul>
 <li><a href = "#">二級導(dǎo)航</a>
 <ul>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 </ul>
 </li> 
 <li><a href = "#">二級導(dǎo)航</a>
 <ul>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 </ul>
 </li> 
 <li><a href = "#">二級導(dǎo)航</a>
 <ul>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 </ul>
 </li> 
 </ul>
</li>
<li><a href = "#">一級導(dǎo)航</a>
 <ul>
 <li><a href = "#">二級導(dǎo)航</a></li> 
 <li><a href = "#">二級導(dǎo)航</a></li> 
 <li><a href = "#">二級導(dǎo)航</a></li> 
 </ul>
</li>
<li><a href = "#">一級導(dǎo)航</a>
 <ul>
 <li><a href = "#">二級導(dǎo)航</a></li> 
 <li><a href = "#">二級導(dǎo)航</a></li> 
 <li><a href = "#">二級導(dǎo)航</a></li> 
 </ul>
</li>
<li><a href = "#">一級導(dǎo)航</a>
 <ul>
 <li><a href = "#">二級導(dǎo)航</a></li> 
 <li><a href = "#">二級導(dǎo)航</a></li> 
 <li><a href = "#">二級導(dǎo)航</a></li> 
 </ul>
</li>
<li><a href = "#">一級導(dǎo)航</a>
 <ul>
 <li class="nav_jw"><a href = "#">二級導(dǎo)航</a>
 <ul>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 </ul>
 </li> 
 <li class="nav_jw"><a href = "#">二級導(dǎo)航</a>
 <ul>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 </ul>
 </li> 
 <li class="nav_jw"><a href = "#">二級導(dǎo)航</a>
 <ul>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 <li><a href = "#">三級導(dǎo)航</a></li>
 </ul>
 </li> 
 </ul>
</li>
</ul>
</p>
</body>
</html>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css三級下拉菜單實現(xiàn)的方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：下拉菜單方式 css

熱門焦點

css三級下拉菜單實現(xiàn)的方法

css三級下拉菜單實現(xiàn)的方法

css三級下拉菜單實現(xiàn)的方法

最新推薦

猜你喜歡

熱門推薦