请选择 进入手机版 | 继续访问电脑版

导航下拉菜单功能实现纯css代码

[复制链接]
查看2916 | 回复1 | 2019-7-8 07:35 | 显示全部楼层 |阅读模式
导航下拉菜单功能实现纯css代码

导航下拉菜单功能实现纯css代码

导航下拉菜单功能实现纯css代码


导航下拉菜单功能实现纯css代码

导航下拉菜单功能实现纯css代码


  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.         <title>自丢网导航下拉菜单css代码</title>
  5.         <style type="text/css">
  6.             * {
  7.                 margin: 0px;
  8.                 padding: 0px;
  9.             }
  10.             
  11.             #nav {
  12.                 width: 500px;
  13.                 background-color: #737373;
  14.                 height: 40px;
  15.                 /*border-radius: 10px;*/
  16.                 position: relative;
  17.                 margin: 0px auto;
  18.                 top: 0px;
  19.             }
  20.             
  21.             .nav-container {
  22.                 width: 100%;
  23.                 height: 40px;
  24.                 position: absolute;
  25.             }
  26.             
  27.             .banner {
  28.                 float: left;
  29.                 text-align: center;
  30.                 height: 40px;
  31.                 width: 20%;
  32.                 line-height: 40px;
  33.             }
  34.             
  35.             .banner:hover {
  36.                 background-color: #00BFFF;
  37.                 cursor: pointer;
  38.             }
  39.             
  40.             div ul {
  41.                 list-style: none;
  42.                 /*display: none;*/
  43.                 background-color: blue;
  44.                 overflow: hidden;
  45.                 /*模拟height:auto时候的情况*/               
  46.                 max-height: 0px;
  47.                 transition: max-height 0.3s;
  48.                 /*多浏览器支持*/
  49.                 -moz-transition: height 1s;
  50.                 -webkit-transition: height 1s;
  51.                 -o-transition: height 1s;
  52.             }
  53.             
  54.             .banner:hover ul {
  55.                 /*display: block;*/
  56.                 width: 100%;
  57.                 max-height: 160px;
  58.             }
  59.             
  60.             div ul li {
  61.                 overflow: hidden;
  62.             }
  63.             
  64.             div ul li:hover {
  65.                 background-color: red;
  66.             }
  67.         </style>
  68.     </head>

  69.     <body>
  70.         <div class="nav-container">
  71.             <div id="nav">
  72.                 <div id="nav-button-1" class="banner">第1个导航
  73.                     <ul>
  74.                         <li>1</li>
  75.                         <li>2</li>
  76.                         <li>3</li>
  77.                         <li>4</li>
  78.                     </ul>
  79.                 </div>
  80.                 <div id="nav-button-2" class="banner">第2个导航
  81.                     <ul>
  82.                         <li>1</li>
  83.                         <li>2</li>
  84.                         <li>3</li>
  85.                     </ul>
  86.                 </div>
  87.                 <div id="nav-button-3" class="banner">第3个导航
  88.                     <ul>
  89.                         <li>1</li>
  90.                         <li>2</li>
  91.                     </ul>
  92.                 </div>
  93.                 <div id="nav-button-4" class="banner">第4个导航
  94.                     <ul>
  95.                         <li>1</li>
  96.                         <li>2</li>
  97.                         <li>3</li>
  98.                         <li>4</li>
  99.                         <li>5</li>
  100.                     </ul>
  101.                 </div>
  102.                 <div id="nav-button-5" class="banner">第5个导航
  103.                     <ul>
  104.                         <li>1</li>
  105.                         <li>2</li>
  106.                         <li>3</li>
  107.                         <li>4</li>
  108.                         <li>5</li>
  109.                     </ul>
  110.                 </div>
  111.             </div>
  112.                         <center>自丢网www.zidiu.com</center>
  113.         </div>
  114.     </body>
  115. </html>
复制代码

110 | 2019-8-20 03:22 | 显示全部楼层
技术学习教程网,支持一下。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-24