css 实现导航菜单

深藏阁楼爱情的钟 2023-10-06 23:14 101阅读 0赞

阅读目录

  • 1 css 实现二级导航菜单
    • html
    • html 附 css
  • 2 css 侧方位导航菜单
  • 3 CSS实现三级导航（模板）
  • 4 实现三级导航

1 css 实现二级导航菜单

html

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  10.  <nav>
  11.     <ul class="level">
  12.         <li><a href="">首页</a></li>
  13.         <li>
  14.             <a href="">栏目1</a>
  15.             <ul class="two">
  16.                 <li>二级菜单1</li>
  17.                 <li>二级菜单2</li>
  18.                 <li>二级菜单3</li>
  19.             </ul>
  20.         </li>
  21.         <li>
  22.             <a href="">栏目2</a>
  23.             <ul class="two">
  24.                 <li>二级菜单4</li>
  25.                 <li>二级菜单5</li>
  26.                 <li>二级菜单6</li>
  27.             </ul>
  28.         </li>
  29.         <li>
  30.             <a href="">栏目3</a>
  31.             <ul class="two">
  32.                 <li>二级菜单7</li>
  33.                 <li>二级菜单8</li>
  34.                 <li>二级菜单9</li>
  35.             </ul>
  36.         </li>
  37.         <li>
  38.             <a href="">栏目4</a>
  39.             <ul class="two">
  40.                 <li>二级菜单10</li>
  41.                 <li>二级菜单11</li>
  42.                 <li>二级菜单12</li>
  43.             </ul>
  44.         </li>
  45.         <li>
  46.             <a href="">栏目5</a>
  47.             <ul class="two">
  48.                 <li>二级菜单13</li>
  49.                 <li>二级菜单14</li>
  50.                 <li>二级菜单15</li>
  51.             </ul>
  52.         </li>
  53.     </ul>
  54. </nav>
  56. </body>
  57. </html>

html 附 css

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>css实现简单的导航栏下拉</title>
  8. </head>
  9. <style>
  10.     /* 先重置一下html，消除HTML标签默认的内外边距 */
  11.     *{
  12.       padding: 0;margin: 0;}
  13.     /* 对导航的内容设置一个主体为800px的宽并使其居中 */
  14.     .wrap{
  15.       width: 800px;margin: 0 auto;}
  16.     /* 清除浮动 */
  17.     .clear{
  18.       clear: both;}
  19.     /* 去掉默认a标签的下划线 */
  20.     a{
  21.       text-decoration-line: none;}
  22.     ul,li{
  23.       list-style: none;}
  24.     nav .level>li{
  25.       float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;transition: .4s;}
  26.     nav .level>li a{
  27.       color: black;}
  28.     /* 设置鼠标滑过后的样式 */
  29.     nav .level>li:hover{
  30.       background: red;}
  31.     /* 先使二级菜单的内容隐藏 */
  32.     nav .two{
  33.       display: none;margin-top: 10px;}
  34.     /* 鼠标滑过一级菜单后的显示二级菜单 */
  35.     nav .level>li:hover .two{
  36.       display: block;}
  37.     nav .two li{
  38.       padding: 5px 0;transition: .4s;cursor: pointer;}
  39.     nav .two li:hover{
  40.       background: pink;}
  41. </style>
  42. <body>
  44. <nav>
  45.     <div class="wrap">
  46.         <ul class="level">
  47.             <li><a href="">首页</a></li>
  48.             <li>
  49.                 <a href="">一、栏目</a>
  50.                 <ul class="two">
  51.                     <li>二级菜单1</li>
  52.                     <li>二级菜单2</li>
  53.                     <li>二级菜单3</li>
  54.                 </ul>
  55.             </li>
  56.             <li>
  57.                 <a href="">栏目2</a>
  58.                 <ul class="two">
  59.                     <li>二级菜单4</li>
  60.                     <li>二级菜单5</li>
  61.                     <li>二级菜单6</li>
  62.                 </ul>
  63.             </li>
  64.             <li>
  65.                 <a href="">栏目3</a>
  66.                 <ul class="two">
  67.                     <li>二级菜单7</li>
  68.                     <li>二级菜单8</li>
  69.                     <li>二级菜单9</li>
  70.                 </ul>
  71.             </li>
  72.             <li>
  73.                 <a href="">栏目4</a>
  74.                 <ul class="two">
  75.                     <li>二级菜单10</li>
  76.                     <li>二级菜单11</li>
  77.                     <li>二级菜单12</li>
  78.                 </ul>
  79.             </li>
  80.             <li>
  81.                 <a href="">栏目5</a>
  82.                 <ul class="two">
  83.                     <li>二级菜单13</li>
  84.                     <li>二级菜单14</li>
  85.                     <li>二级菜单15</li>
  86.                 </ul>
  87.             </li>
  88.         </ul>
  89.     </div>
  90. </nav>
  93. </body>
  94. </html>

2 css 侧方位导航菜单

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>测试</title>
  6.     <style>
  7.         *{
  9.             margin:0px;
  10.             padding:0px;
  11.         }
  12.        .page {
  14.            width:100%;
  15.            height:100%;
  16.        }
  17.         .nav {
  19.             width:160px;
  20.             height:205px;
  21.             position: fixed;
  22.             left: 0;
  23.             top: 50%;
  24.             margin-top: -103px;
  25.         }
  26.         .nav-li {
  28.             width: 160px;
  29.             height: auto;
  30.             color: #FFF;
  31.             line-height: 40px;
  32.             background: #333;
  33.             text-align: center;
  34.             font-size: 16px;
  35.             border-bottom:1px solid #FFF;
  36.             cursor: pointer;
  37.         }
  38.         .tit {
  40.             width: 160px;
  41.             height: 40px;
  42.         }
  43.         .nav-li:hover ul {
  45.             display: block;
  46.         }
  47.         .nav-li ul {
  49.             width: 160px;
  50.             height: auto;
  51.             background: #FFFFFF;
  52.             display: none;
  53.         }
  54.         .nav-li ul li {
  56.             width: 160px;
  57.             height: 40px;
  58.             border-bottom:1px dashed #666;
  59.             color: #333;
  60.             text-align: center;
  61.             line-height: 40px;
  62.             position: relative;
  63.         }
  64.         .nav-li ul li:hover .list-3 {
  66.             display: block;
  67.         }
  69.         .list-3 {
  71.             width: 160px;
  72.             height: auto;
  73.             position: absolute;
  74.             left: 160px;
  75.             top: 0px;
  76.             display: none;
  77.         }
  78.         .list-3Dom {
  80.             width: 160px;
  81.             height: 40px;
  82.             background: #444;
  83.             border-bottom:1px dashed #666;
  84.             color: #FFF;
  85.             text-align: center;
  86.             line-height: 40px;
  87.         }
  88.     </style>
  89. </head>
  90. <body>
  92. <div class="page">
  93.     <div class="nav">
  94.         <div class="nav-li">
  95.             <div class="tit">侧方标题(一)</div>
  96.             <ul>
  97.                 <li>
  98.                     二级栏目
  99.                     <div class="list-3">
  100.                         <div class="list-3Dom">三级栏目</div>
  101.                         <div class="list-3Dom">三级栏目</div>
  102.                         <div class="list-3Dom">三级栏目</div>
  103.                     </div>
  104.                 </li>
  105.                 <li>
  106.                     二级栏目
  107.                     <div class="list-3">
  108.                         <div class="list-3Dom">三级栏目</div>
  109.                         <div class="list-3Dom">三级栏目</div>
  110.                         <div class="list-3Dom">三级栏目</div>
  111.                     </div>
  112.                 </li>
  113.                 <li>
  114.                     二级栏目
  115.                     <div class="list-3">
  116.                         <div class="list-3Dom">三级栏目</div>
  117.                         <div class="list-3Dom">三级栏目</div>
  118.                         <div class="list-3Dom">三级栏目</div>
  119.                     </div>
  120.                 </li>
  121.             </ul>
  122.         </div>
  123.         <div class="nav-li">
  124.             <div class="tit">侧方标题(二)</div>
  125.             <ul>
  126.                 <li>
  127.                     二级栏目
  128.                     <div class="list-3">
  129.                         <div class="list-3Dom">三级栏目</div>
  130.                         <div class="list-3Dom">三级栏目</div>
  131.                         <div class="list-3Dom">三级栏目</div>
  132.                     </div>
  133.                 </li>
  134.                 <li>
  135.                     二级栏目
  136.                     <div class="list-3">
  137.                         <div class="list-3Dom">三级栏目</div>
  138.                         <div class="list-3Dom">三级栏目</div>
  139.                         <div class="list-3Dom">三级栏目</div>
  140.                     </div>
  141.                 </li>
  142.                 <li>
  143.                     二级栏目
  144.                     <div class="list-3">
  145.                         <div class="list-3Dom">三级栏目</div>
  146.                         <div class="list-3Dom">三级栏目</div>
  147.                         <div class="list-3Dom">三级栏目</div>
  148.                     </div>
  149.                 </li>
  150.             </ul>
  151.         </div>
  152.         <div class="nav-li">
  153.             <div class="tit">侧方标题(三)</div>
  154.             <ul>
  155.                 <li>
  156.                     二级栏目
  157.                     <div class="list-3">
  158.                         <div class="list-3Dom">三级栏目</div>
  159.                         <div class="list-3Dom">三级栏目</div>
  160.                         <div class="list-3Dom">三级栏目</div>
  161.                     </div>
  162.                 </li>
  163.                 <li>
  164.                     二级栏目
  165.                     <div class="list-3">
  166.                         <div class="list-3Dom">三级栏目</div>
  167.                         <div class="list-3Dom">三级栏目</div>
  168.                         <div class="list-3Dom">三级栏目</div>
  169.                     </div>
  170.                 </li>
  171.                 <li>
  172.                     二级栏目
  173.                     <div class="list-3">
  174.                         <div class="list-3Dom">三级栏目</div>
  175.                         <div class="list-3Dom">三级栏目</div>
  176.                         <div class="list-3Dom">三级栏目</div>
  177.                     </div>
  178.                 </li>
  179.             </ul>
  180.         </div>
  181.         <div class="nav-li">
  182.         </div>
  183.     </div>
  184. </div>
  186. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  187. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  188. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  189. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  190. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  191. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  192. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  193. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  194. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  195. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  196. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  197. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  198. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  199. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  200. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  201. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  202. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  203. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  204. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  205. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  206. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  207. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  208. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  209. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  210. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  211. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  212. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  213. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  214. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  215. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  216. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  217. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  218. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  219. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  220. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  221. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  222. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  223. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  224. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  225. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  226. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  227. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  228. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  229. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  230. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  231. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  232. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  233. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  234. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  235. 暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯暗室逢灯
  237. </body>
  238. </html>

3 CSS实现三级导航（模板）

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>纯css级联导航</title>
  7. <style>
  8.     body,div,ul,li,a{
  10.         margin: 0;
  11.         padding: 0;
  12.         text-decoration: none;
  13.     }
  14.     /* 一级导航 */
  15.      .one-nav li{
  17.         list-style-type: none;
  18.         float: left;
  19.         width: 16.57%;
  20.         text-align: center;
  21.         background-color: #3391E6;
  22.         border-right: 1px solid white;
  23.         cursor: pointer;
  24.         height: 30px;
  25.         line-height: 30px;
  26.     }
  27.      .one-nav li:nth-last-child(1){
  29.         border-right: none;
  30.     }
  31.      .one-nav li a{
  33.         color: white;
  34.     }
  35.      .one-nav li:hover .two-nav{
  37.         display: block;
  38.     }
  39.      .one-nav li:hover{
  41.         background-color: #4260D7;
  42.     }
  43.     /* 二级导航 */
  44.      .two-nav {
  46.         display: none;
  47.     }
  48.      .two-nav li{
  50.         width: 100%;
  51.     }
  52.      .two-nav li:hover .three-nav{
  54.         display: block;
  55.         position: relative;
  56.     }
  57.     /* 三级导航 */
  58.      .three-nav{
  60.         position: absolute;
  61.         width:100%;
  62.         left: 100%;
  63.         bottom: 100%;
  64.     }
  65.     /* 最右边的三级导航显示在左边 */
  66.      .one-nav li:nth-last-child(1) .two-nav li .three-nav li{
  68.         width: 100%;
  69.         position:relative;
  70.         right: 200%;
  71.     }
  72. </style>
  73. </head>
  74. <body>
  76. <div class="main">
  77.     <ul class="one-nav">
  78.         <li>
  79.             <a href="javascript:;">一级导航</a>
  80.             <ul class="two-nav">
  81.                 <li><a href="javascript:;">二级导航</a></li>
  82.                 <li><a href="javascript:;">二级导航</a></li>
  83.                 <li><a href="javascript:;">二级导航</a></li>
  84.                 <li><a href="javascript:;">二级导航</a></li>
  85.             </ul>
  86.         </li>
  88.         <li>
  89.             <a href="javascript:;">一级导航</a>
  90.             <ul class="two-nav">
  91.                 <li><a href="javascript:;">二级导航</a></li>
  92.                 <li><a href="javascript:;">二级导航</a></li>
  93.             </ul>
  94.         </li>
  96.         <li>
  97.             <a href="javascript:;">一级导航</a>
  98.             <ul class="two-nav">
  99.                 <li><a href="javascript:;">二级导航</a></li>
  100.                 <li>
  101.                     <a href="javascript:;">二级导航></a>
  102.                     <ul class="three-nav">
  103.                         <li><a href="javascipt:;">三级导航</a></li>
  104.                         <li><a href="javascipt:;">三级导航</a></li>
  105.                         <li><a href="javascipt:;">三级导航</a></li>
  106.                     </ul>
  107.                 </li>
  108.                 <li><a href="javascript:;">二级导航</a></li>
  109.             </ul>
  110.         </li>
  112.         <li>
  113.             <a href="javascript:;">一级导航</a>
  114.             <ul class="two-nav">
  115.                 <li><a href="javascript:;">二级导航</a></li>
  116.                 <li><a href="javascript:;">二级导航</a></li>
  117.                 <li><a href="javascript:;">二级导航</a></li>
  118.                 <li><a href="javascript:;">二级导航</a></li>
  119.                 <li><a href="javascript:;">二级导航</a></li>
  120.             </ul>
  121.         </li>
  123.         <li>
  124.             <a href="javascript:;">一级导航</a>
  125.             <ul class="two-nav">
  126.                 <li><a href="javascript:;">二级导航</a></li>
  127.                 <li><a href="javascript:;">二级导航</a></li>
  128.                 <li><a href="javascript:;">二级导航</a></li>
  129.                 <li><a href="javascript:;">二级导航</a></li>
  130.                 <li><a href="javascript:;">二级导航</a></li>
  131.                 <li><a href="javascript:;">二级导航</a></li>
  132.             </ul>
  133.         </li>
  135.         <li>
  136.             <a href="javascript:;">一级导航</a>
  137.             <ul class="two-nav">
  138.                 <li><a href="javascript:;">二级导航</a></li>
  139.                 <li><a href="javascript:;">二级导航</a></li>
  140.                 <li><a href="javascript:;">二级导航</a></li>
  141.                 <li>
  142.                     <a href="javascript:;"><二级导航</a>
  143.                     <ul class="three-nav">
  144.                         <li><a href="javascipt:;">三级导航</a></li>
  145.                         <li><a href="javascipt:;">三级导航</a></li>
  146.                         <li><a href="javascipt:;">三级导航</a></li>
  147.                     </ul>
  148.                 </li>
  149.             </ul>
  150.         </li>
  151.     </ul>
  152. </div>
  155. </body>
  156. </html>

4 实现三级导航

在这里插入图片描述

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. *{
  8.     margin:0;
  9.     padding: 0;
  10. }
  11. li{
  13.     list-style: none;
  14.     text-align: center;
  15. }
  16. a{
  18.     text-decoration:none; color: #fff;
  19.     font-size: 14px;
  20. }
  21. .one{
  23.     width: 100%;
  24.     height: 40px;
  25.     background-color: #333;
  26.     margin: 0 auto;
  27. }
  28. .one >li{
  30.     float: left;
  31.     width: 100px;
  32.     line-height: 40px;
  33.     border-left: 1px solid #eee;
  34.     height: 40px;
  35.     position: relative;
  36. }
  37. .two{
  39.     display: none;
  40.     position: absolute;
  41.     width: 100%;
  42. }
  43. .two >li{
  45.     height: 40px;
  46.     width: 100px;
  47.     background-color: #666;
  48.     position: relative;
  49. }
  50. .one li a{
  52.     display: block;/**/
  53. }
  54. .one>li:hover>ul{
  56.     display: block;
  57. }
  58. .three{
  60.     display: none;
  61.     position: absolute;
  62.     width: 100%;
  63.     left: 100px;
  64.     top: 0px;
  65. }
  66. .three li{
  68.     background-color: red;
  69.     height: 40px;
  70. }
  71. .two li:hover ul{
  73.     display: block;
  74. }
  75. </style>
  76. </head>
  77. <body>
  79. <ul class="one">
  80.         <li>
  81.             <a href="#">一级菜单</a>
  82.             <ul class="two">
  83.                 <li>
  84.                     <a href="#">二级菜单</a>
  85.                     <ul class="three">
  86.                         <li><a href="#">三级菜单</a></li>
  87.                         <li><a href="#">三级菜单</a></li>
  88.                         <li><a href="#">三级菜单</a></li>
  89.                     </ul>
  90.                 </li>
  91.                 <li>
  92.                     <a href="#">二级菜单</a>
  93.                     <ul class="three">
  94.                         <li><a href="#">三级菜单</a></li>
  95.                         <li><a href="#">三级菜单</a></li>
  96.                         <li><a href="#">三级菜单</a></li>
  97.                     </ul>
  98.                 </li>
  99.                 <li>
  100.                     <a href="#">二级菜单</a>
  101.                     <ul class="three">
  102.                         <li><a href="#">三级菜单</a></li>
  103.                         <li><a href="#">三级菜单</a></li>
  104.                         <li><a href="#">三级菜单</a></li>
  105.                     </ul>
  106.                 </li>
  107.             </ul>
  108.         </li>
  109.         <li><a href="#">一级菜单</a>
  110.         <ul class="two">
  111.                 <li>
  112.                     <a href="#">二级菜单</a>
  113.                     <ul class="three">
  114.                         <li><a href="#">三级菜单</a></li>
  115.                         <li><a href="#">三级菜单</a></li>
  116.                         <li><a href="#">三级菜单</a></li>
  117.                     </ul>
  118.                 </li>
  119.                 <li>
  120.                     <a href="#">二级菜单</a>
  121.                     <ul class="three">
  122.                         <li><a href="#">三级菜单</a></li>
  123.                         <li><a href="#">三级菜单</a></li>
  124.                         <li><a href="#">三级菜单</a></li>
  125.                     </ul>
  126.                 </li>
  127.                 <li>
  128.                     <a href="#">二级菜单</a>
  129.                     <ul class="three">
  130.                         <li><a href="#">三级菜单</a></li>
  131.                         <li><a href="#">三级菜单</a></li>
  132.                         <li><a href="#">三级菜单</a></li>
  133.                     </ul>
  134.                 </li>
  135.             </ul></li>
  136.         <li><a href="#">一级菜单</a>
  137.         <ul class="two">
  138.                 <li>
  139.                     <a href="#">二级菜单</a>
  140.                     <ul class="three">
  141.                         <li><a href="#">三级菜单</a></li>
  142.                         <li><a href="#">三级菜单</a></li>
  143.                         <li><a href="#">三级菜单</a></li>
  144.                     </ul>
  145.                 </li>
  146.                 <li>
  147.                     <a href="#">二级菜单</a>
  148.                     <ul class="three">
  149.                         <li><a href="#">三级菜单</a></li>
  150.                         <li><a href="#">三级菜单</a></li>
  151.                         <li><a href="#">三级菜单</a></li>
  152.                     </ul>
  153.                 </li>
  154.                 <li>
  155.                     <a href="#">二级菜单</a>
  156.                     <ul class="three">
  157.                         <li><a href="#">三级菜单</a></li>
  158.                         <li><a href="#">三级菜单</a></li>
  159.                         <li><a href="#">三级菜单</a></li>
  160.                     </ul>
  161.                 </li>
  162.             </ul></li>
  163.         <li><a href="#">一级菜单</a>
  164.         <ul class="two">
  165.                 <li>
  166.                     <a href="#">二级菜单</a>
  167.                     <ul class="three">
  168.                         <li><a href="#">三级菜单</a></li>
  169.                         <li><a href="#">三级菜单</a></li>
  170.                         <li><a href="#">三级菜单</a></li>
  171.                     </ul>
  172.                 </li>
  173.                 <li>
  174.                     <a href="#">二级菜单</a>
  175.                     <ul class="three">
  176.                         <li><a href="#">三级菜单</a></li>
  177.                         <li><a href="#">三级菜单</a></li>
  178.                         <li><a href="#">三级菜单</a></li>
  179.                     </ul>
  180.                 </li>
  181.                 <li>
  182.                     <a href="#">二级菜单</a>
  183.                     <ul class="three">
  184.                         <li><a href="#">三级菜单</a></li>
  185.                         <li><a href="#">三级菜单</a></li>
  186.                         <li><a href="#">三级菜单</a></li>
  187.                     </ul>
  188.                 </li>
  189.             </ul></li>
  190.         <li>
  191.             <a href="#">一级菜单</a>
  192.              <ul class="two">
  193.                 <li>
  194.                     <a href="#">二级菜单</a>
  195.                     <ul class="three">
  196.                         <li><a href="#">三级菜单</a></li>
  197.                         <li><a href="#">三级菜单</a></li>
  198.                         <li><a href="#">三级菜单</a></li>
  199.                     </ul>
  200.                 </li>
  201.                 <li>
  202.                     <a href="#">二级菜单</a>
  203.                     <ul class="three">
  204.                         <li><a href="#">三级菜单</a></li>
  205.                         <li><a href="#">三级菜单</a></li>
  206.                         <li><a href="#">三级菜单</a></li>
  207.                     </ul>
  208.                 </li>
  209.                 <li>
  210.                     <a href="#">二级菜单</a>
  211.                     <ul class="three">
  212.                         <li><a href="#">三级菜单</a></li>
  213.                         <li><a href="#">三级菜单</a></li>
  214.                         <li><a href="#">三级菜单</a></li>
  215.                     </ul>
  216.                 </li>
  217.             </ul>
  218.          </li>
  219.         <li style="float:right;margin-right:200px;">
  220.             <a href="#">一级菜单</a>
  221.               <ul class="two">
  222.                 <li>
  223.                     <a href="#">二级菜单</a>
  224.                     <ul class="three">
  225.                         <li><a href="#">三级菜单</a></li>
  226.                         <li><a href="#">三级菜单</a></li>
  227.                         <li><a href="#">三级菜单</a></li>
  228.                     </ul>
  229.                 </li>
  230.                 <li>
  231.                     <a href="#">二级菜单</a>
  232.                     <ul class="three">
  233.                         <li><a href="#">三级菜单</a></li>
  234.                         <li><a href="#">三级菜单</a></li>
  235.                         <li><a href="#">三级菜单</a></li>
  236.                     </ul>
  237.                 </li>
  238.                 <li>
  239.                     <a href="#">二级菜单</a>
  240.                     <ul class="three">
  241.                         <li><a href="#">三级菜单</a></li>
  242.                         <li><a href="#">三级菜单</a></li>
  243.                         <li><a href="#">三级菜单</a></li>
  244.                     </ul>
  245.                 </li>
  246.             </ul>
  247.         </li>
  248.     </ul>
  250. </body>
  251. </html>

发表评论

表情：
评论列表 （有 0 条评论，101人围观）

还没有评论，来说两句吧...

相关阅读