search

博客列表 >带二级分类的导航

带二级分类的导航

蒲公英
蒲公英原创
2021年11月12日 16:55:21365浏览

带二级分类的导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航-二级分类</title>
  6.     <style>
  7.         body,ul,li{
  8.             padding: 0px;
  9.             margin: 0px;
  10.         }
  11.         li{
  12.             list-style: none;
  13.         }
  14.         a{
  15.             text-decoration: none;
  16.             color: white;
  17.         }
  18.         nav,nav>ul{
  19.             /*border:1px solid red;*/
  20.             background: blue;
  21.           /*  width: 1200px; 指定宽度*/
  22.           /* margin: 10px     auto;*/
  23.         }
  24.         nav>ul{
  25.             /*border:1px solid #000000;*/
  26.             display: flex;
  27.             justify-content: center; <!--对齐-->
  28.         }
  29.         nav>ul>li{
  30.             position: relative;
  31.             padding: 10px 20px;
  32.             width: 100px;
  33.         }
  34.         nav>ul>li:hover,nav>ul>li>ul>li:hover {
  35.             background: #a31515;
  36.         }
  37.         nav>ul>li>ul{
  38.             position: absolute;
  39.             /*border:1px solid #000;*/
  40.             background: red;
  41.             left:0px;
  42.             top:40px;
  43.             display: none;
  44.             width: 140px
  45.         }
  46.         nav>ul>li>ul>li{
  47.             padding: 10px 20px;
  48.         }
  49.         nav>ul>li:hover>ul{
  50.             display: block;
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55. <!--导航区域-->
  56. <nav>
  57.     <ul>
  58.         <li><a href="">首页</a></li>
  59.         <li>
  60.             <a href="">图书</a>
  61.             <ul>
  62.                 <li><a href="">小学</a></li>
  63.                 <li><a href="">中学</a></li>
  64.                 <li><a href="">其他</a></li>
  65.             </ul>
  67.         </li>
  68.         <li>
  69.             <a href="">服饰</a>
  70.             <ul>
  71.                 <li><a href="">童装</a></li>
  72.                 <li><a href="">女装</a></li>
  73.                 <li><a href="">男装</a></li>
  74.             </ul>
  75.         </li>
  76.         <li><a href="">家居</a>
  77.             <ul>
  78.                 <li><a href="">客厅用</a></li>
  79.                 <li><a href="">房间用</a></li>
  80.                 <li><a href="">其他</a></li>
  81.             </ul>
  82.         </li>
  83.         <li>
  84.             <a href="">珠宝饰品</a>
  85.             <ul>
  86.                 <li><a href="">黄金珠宝</a></li>
  87.                 <li><a href="">流行饰品</a></li>
  88.                 <li><a href="">流行饰品</a></li>
  89.                 <li><a href="">礼品</a></li>
  90.             </ul>
  91.         </li>
  92.     </ul>
  93. </nav>
  94. </body>
  95. </html>
上一条：表格与表单下一条：第三课-盒子模型-导航栏
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议