溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用html+css制作三級下拉菜單

發(fā)布時間：2021-07-02 11:29:33 來源：億速云 閱讀：252 作者：小新 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)如何使用html+css制作三級下拉菜單的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體內(nèi)容如下

1.html代碼    

XML/HTML Code復制內(nèi)容到剪貼板

  1. <!DOCTYPE>  

  2. <html>  

  3. <head>  

  4.     <meta charset="utf-8">  

  5.     <title>三級下拉菜單導航欄</title>  

  6.     <link rel="stylesheet" type="text/css" href="style.css">  

  7. </head>  

  8. <body bgcolor="aliceblue">  

  9.     <ul class="nav">  

  10.         <li>  

  11.             <a href="" target="_blank">  

  12.                 手機數(shù)碼<span class="triangle">▼</span></a>  

  13.             <ul>  

  14.                 <li><a href="#" target="_blank">  

  15.                     手機 <span class="triangle">?</span>  

  16.                     </a>  

  17.                     <ul>  

  18.                         <li><a href="">小米</a></li>  

  19.                         <li><a href="">華為</a></li>  

  20.                         <li><a href="">魅族</a></li>  

  21.                     </ul>  

  22.                 </li>  

  23.                 <li><a href="">  

  24.                     電腦 <span class="triangle">?</span>  

  25.                     </a>  

  26.                     <ul>  

  27.                         <li><a href="">平板</a></li>  

  28.                         <li><a href="">筆記本</a></li>  

  29.                         <li><a href="">臺式</a></li>  

  30.                     </ul>  

  31.                 </li>  

  32.                 <li><a href="">相機</a></li>  

  33.             </ul>  

  34.         </li>  

  35.         <li><a href="">男裝女裝<span class="triangle">▼</span></a>  

  36.             <ul>  

  37.                 <li><a href="">  

  38.                     上衣 <span class="triangle">?</span></a>  

  39.                     <ul>  

  40.                         <li><a href="">襯衫</a></li>  

  41.                         <li><a href="">T恤</a></li>  

  42.                     </ul>  

  43.                 </li>  

  44.                 <li><a href="">  

  45.                     褲子 <span class="triangle">?</span></a>  

  46.                     <ul>  

  47.                         <li><a href="">牛仔褲</a></li>  

  48.                         <li><a href="">休閑褲</a></li>  

  49.                     </ul>  

  50.                 </li>    

  51.             </ul>  

  52.         </li>  

  53.         <li><a href="">運動戶外<span class="triangle">▼</span></a>  

  54.             <ul>  

  55.                 <li><a href="">運動鞋</a></li>  

  56.                 <li><a href="">運動服</a></li>  

  57.                 <li><a href="">運動設備</a></li>       

  58.             </ul>  

  59.         </li>  

  60.         <li>  

  61.             <a href="">時尚百貨</a>  

  62.         </li>  

  63.         <li><a href="">生活服務<span class="triangle">▼</span></a>  

  64.             <ul>  

  65.                 <li><a href="">萬能繳費</a></li>  

  66.                     <ul>  

  67.                         <li><a href="">水費</a></li>  

  68.                         <li><a href="">電費</a></li>  

  69.                     </ul>  

  70.                 <li><a href="">教育培訓</a></li>       

  71.                 <li><a href="">話費充值</a></li>  

  72.             </ul>  

  73.         </li>  

  74.         <li>  

  75.             <a href="">   匯吃美食</a>  

  76.         </li>  

  77.         <li>  

  78.             <a href="">   家居家紡<span class="triangle">▼</span></a>  

  79.             <ul>  

  80.                 <li><a href="">  

  81.                     <span class="triangle">?</span> 床上用品</a>  

  82.                     <ul class="nav1">  

  83.                         <li><a href="">被子</a></li>  

  84.                         <li><a href="">枕頭</a></li>  

  85.                     </ul>  

  86.                 </li>  

  87.                 <li>  

  88.                     <a href=""><span class="triangle">?</span> 客廳家具</a>  

  89.                     <ul class="nav1">  

  90.                         <li><a href="">茶具</a></li>  

  91.                         <li><a href="">沙發(fā)</a></li>  

  92.                         <li><a href="">椅子</a></li>  

  93.                     </ul>  

  94.                 </li>  

  95.             </ul>  

  96.         </li>  

  97.     </ul>  

  98. </body>  

  99. </html>      

2.CSS 代碼

CSS Code復制內(nèi)容到剪貼板

  1. *{   

  2.         padding: 0;   

  3.         margin: 0;         

  4.     }   

  5.     ul{   

  6.         list-style-type:none;   

  7.     }   

  8.     .triangle{   

  9.     

  10.         font-size: 1em;   

  11.         color: white;    

  12.     }   

  13.     a{   

  14.         text-decoration:none;   

  15.         text-align: center;   

  16.         font-weight: bold;   

  17.     

  18.     }   

  19.     /*一級導航*/  

  20.     ul.nav{   

  21.         float: left;   

  22.         border:1px solid gray;   

  23.         margin-left: 10%;   

  24.         margin-top:10px;   

  25.         border-radius: 4px;   

  26.         position: fixed;   

  27.     }   

  28.     ul.nav li{   

  29.         float: left;   

  30.         width: 9em;   

  31.         background-color:yellowgreen;   

  32.     }   

  33.     ul.nav a{   

  34.         display: block;   

  35.         color: white;   

  36.         line-height: 1.5em;   

  37.         border-right: 1px solid white;   

  38.         border-left: 1px solid white;   

  39.         padding: 5px;   

  40.     }   

  41.     

  42.     ul.nav a:hover,   

  43.     ul.nav a:focus{   

  44.         color: black;   

  45.         background-color: #98FB98;   

  46.         opacity: 0.5;   

  47.     }   

  48.     ul.nav li:first-child a{   

  49.         border-left: 0;   

  50.         border-bottom: 0;   

  51.     }   

  52.     ul.nav li:last-child a{   

  53.         border-right: 0;   

  54.         border-bottom: 0;   

  55.     }   

  56.     /*二級導航*/  

  57.     ul.nav li ul{   

  58.         width: 10em;           

  59.         position: absolute;   

  60.         left: -1000em;   

  61.     }   

  62.         

  63.     ul.nav li:hover ul{   

  64.         width: 10em;   

  65.         left:auto;   

  66.     }   

  67.         

  68.     ul.nav li ul a{   

  69.         border-top: 1px solid white;   

  70.         border-bottom: 1px solid white;   

  71.         border-left: 0;   

  72.         border-right: 0;   

  73.             

  74.     }   

  75.     /*三級導航*/  

  76.     ul.nav li:hover ul li ul{   

  77.         width: 10em;   

  78.         position: absolute;   

  79.         left: -1000em;   

  80.     

  81.     }   

  82.         

  83.     ul.nav li:hover ul li:hover ul{   

  84.         left: auto;   

  85.         margin-left: 9.1em;   

  86.         margin-top: -2.1em;   

  87.     }   

  88.     ul.nav li:hover ul li:hover ul.nav1{   

  89.         left: auto;   

  90.         margin-left: -9.1em;   

  91.         margin-top: -2.1em;   

  92.     }   

感謝各位的閱讀！關(guān)于“如何使用html+css制作三級下拉菜單”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手