使用伸缩盒标签制作一个首页的二级分类

  1. <head>
  2.     <meta charset="utf-8">
  3.     <title>弹性盒模式二级导航按钮</title>
  4.     <style type="text/css">
  5.         body，nav,ul{
  6.             margin: 0px;
  7.             padding: 0px;
  8.         }
  9.         nav>ul{
  10.             display: flex;
  11.             background-color: aquamarine;
  12.             justify-content: center;
  13.         }
  14.         li{
  15.             list-style: none;
  16.         }
  17.         a{
  18.             text-decoration: none;
  19.         }
  20.         nav>ul>li{
  21.             padding: 10px 20px;
  22.             position: relative; 
  23.         }
  24.         nav>ul>li:hover,nav>ul>li>ul>li:hover{
  25.             background-color: chocolate;
  26.         }
  27.         nav>ul>li>ul{
  28.             position: absolute;
  29.             /* border: 1px solid #D2691E; */
  30.             top:40px;
  31.             left:0px;
  32.             display: none;
  33.         }
  34.         nav>ul>li>ul>li{
  35.             background-color: #7FFFD4;
  36.             padding: 10px 20px;
  37.         }
  38.         nav>ul>li:hover>ul{
  39.             display: block;
  41.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <nav>
  51.         <ul>
  52.             <li><a href="">首页</a></li>
  53.             <li><a href="">公司简介</a></li>
  54.             <li><a href="">新闻资讯</a></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.             </ul>
  62.             </li>
  64.             <li><a href="">联系我们</a></li>
  65.         </ul>
  67.     </nav>
  68. </body>

更多相关文章

  1. 第三课-盒子模型-导航栏
  2. 前端基础，伸缩盒布局小案例及总结
  3. 弹性盒flex的使用
  4. 云原生中定时弹性伸缩之CronHPA实战
  5. 仿京东移动端首页
  6. 仿smzdm移动端首页
  7. 9.26作业-仿站php.cn手机端
  8. 一句话次导航相关问题
  9. 网站关键词规划和布局

随机推荐

  1. 进程间通讯概述
  2. 字符串处理函数strcat和strtok
  3. (转）linux字体安装
  4. eclipse maven 插件安装 for mac，linux，win
  5. Linux系统只能连上内网不能够连上外网。U
  6. linux shell基础语法
  7. Linux系统的文件传输工具RZSZ
  8. 使用wdcp完成网站搭建
  9. linux忘记root密码的两种修改方法
  10. Linux Socket编程（不限Linux）