純CSS實現二級導航下拉菜單--css的簡單應用

本文轉載自查看原文 2017-07-21 08:19 16565 CSS/ HTML

思想：使用css的display屬性控制二級下拉菜單的顯示與否。當鼠標移動到一級導航菜單的li標簽時，顯示二級導航菜單的ul標簽。由於實現起來比較簡單，所以在這里直接給出了參考代碼。

1、純CSS二級導航下拉菜單代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" content="text/html" http-equiv="content-type">
 5     <title>純css二級導航下拉菜單</title>
 6     <meta name="keyword" content="關鍵字">
 7     <meta name="description" content="描述">
 8     <style type="text/css">
 9  *{margin: 0;padding: 0;}
10  #bg{background: red;width: 100%;height: 35px;}
11  nav{height: 35px;width: 1000px;margin: 0 auto;}
12  nav ul li{list-style-type:none;float: left}
13  nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;
14  color:white;font-fimily:微軟雅黑;}
15  nav ul li ul li{float: none}
16  nav ul li ul li a{color:black}
17  nav ul li ul{display: none;}
18  nav ul li:hover ul{display: block;}
19     </style>
20 </head>
21 <body>
22 <div id="bg">
23 <nav>
24     <ul>
25         <li><a href="#">一級導航</a>
26         <ul>
27             <li><a href="#">二級導航</a></li>
28             <li><a href="#">二級導航</a></li>
29             <li><a href="#">二級導航</a></li>
30             <li><a href="#">二級導航</a></li>
31         </ul>
32         </li>
33         <li><a href="#">一級導航</a>
34             <ul>
35                 <li><a href="#">二級導航</a></li>
36                 <li><a href="#">二級導航</a></li>
37                 <li><a href="#">二級導航</a></li>
38             </ul>
39         </li>
40         <li><a href="#">一級導航</a>
41             <ul>
42                 <li><a href="#">二級導航</a></li>
43                 <li><a href="#">二級導航</a></li>
44                 <li><a href="#">二級導航</a></li>
45                 <li><a href="#">二級導航</a></li>
46             </ul>
47         </li>
48         <li><a href="#">一級導航</a>
49             <ul>
50                 <li><a href="#">二級導航</a></li>
51                 <li><a href="#">二級導航</a></li>
52                 <li><a href="#">二級導航</a></li>
53             </ul>
54         </li>
55         <li><a href="#">一級導航</a>
56             <ul>
57                 <li><a href="#">二級導航</a></li>
58                 <li><a href="#">二級導航</a></li>
59                 <li><a href="#">二級導航</a></li>
60                 <li><a href="#">二級導航</a></li>
61                 <li><a href="#">二級導航</a></li>
62             </ul>
63         </li>
64         <li><a href="#">一級導航</a>
65             <ul>
66                 <li><a href="#">二級導航</a></li>
67                 <li><a href="#">二級導航</a></li>
68                 <li><a href="#">二級導航</a></li>
69                 <li><a href="#">二級導航</a></li>
70             </ul>
71         </li>
72         <li><a href="#">一級導航</a>
73             <ul>
74                 <li><a href="#">二級導航</a></li>
75                 <li><a href="#">二級導航</a></li>
76             </ul>
77         </li>
78     </ul>
79 </nav>
80 </div>
81 </body>
82 </html>

2、運行效果:

源碼：純CSS實現二級導航下拉菜單.zip

備注：

　　文章為本人原創轉載請注明出處文章難免會有紕漏之處還望大家多多包含如有意見或者建議可與本人聯系本人QQ：2187093468（非誠請勿擾，加好友請備注在哪里看到的）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML+CSS實現導航欄二級下拉菜單完整代碼如何實現導航菜單欄中的二級下拉菜單？用三種方式實現導航菜單中的二級下拉菜單制作二級下拉菜單無限級下拉菜單（樹形菜單，二級菜單） javascript實現下拉二級菜單 JavaScript實現HTML導航欄下拉菜單[懸浮顯示] html+css二級導航的實現 css 實現動態二級菜單 CSS:不用js實現的css下拉菜單特效

純CSS實現二級導航下拉菜單--css的簡單應用

思想：使用css的display屬性控制二級下拉菜單的顯示與否。當鼠標移動到一級導航菜單的li標簽時，顯示二級導航菜單的ul標簽。由於實現起來比較簡單，所以在這里直接給出了參考代碼。

1、純CSS二級導航下拉菜單代碼：

2、運行效果:

源碼：純CSS實現二級導航下拉菜單.zip

備注：

文章為本人原創 轉載請注明出處 文章難免會有紕漏之處 還望大家多多包含 如有意見或者建議可與本人聯系 本人QQ：2187093468（非誠請勿擾，加好友請備注在哪里看到的）

免責聲明！

　　文章為本人原創轉載請注明出處文章難免會有紕漏之處還望大家多多包含如有意見或者建議可與本人聯系本人QQ：2187093468（非誠請勿擾，加好友請備注在哪里看到的）