导航栏往下拉莱单作用完成纯css编码

2021-03-14 05:26

新闻报道新闻资讯blog织梦cms模版适用PC+wap+MIP+有利于S 953 1 响应式资询管理方法类网站织梦cms模版(响应式移动 897 0 饭堂承揽餐馆服务管理方法类网站织梦cms模版(带手 812 0 （响应式手机上版）响应式工程项目机械设备发掘机类网 809 0 （带手机上版数据信息同歩）环保节能环境保护太阳能发电新能源技术类 774 0 天然的纯蜂蜜蜜峰饲养类网站织梦cms模版(带手机上端) 763 0 生日蛋糕食品类蛋糕烘焙学习培训院校类织梦cms模版(带手机上端) 759 0 电缆线电缆线类网站织梦cms模版(响应式手机上端)+PC+ 754 0 激光器机器设备类公司新织梦cms模版(响应式手机上端)+P 732 0 游戏娱乐新闻报道新闻资讯类网站织梦cms模版(带手机端)+PC+ 709 0

html xmlns= 1999/xhtml lang= en
    head
      meta http-equiv= Content-Type content= text/html; charset=UTF-8 /
      title 自丢网导航栏往下拉莱单css编码 /title
      style type= text/css
         * {
            margin: 0px;
            padding: 0px;
         }
         
         #nav {
            width: 500px;
            background-color: #737373;
            height: 40px;
            /*border-radius: 10px;*/
            position: relative;
            margin: 0px auto;
            top: 0px;
         }
         
         .nav-container {
            width: 100%;
            height: 40px;
            position: absolute;
         }
         
         .banner {
            float: left;
            text-align: center;
            height: 40px;
            width: 20%;
            line-height: 40px;
         }
         
         .banner:hover {
            background-color: #00BFFF;
            cursor: pointer;
         }
         
         div ul {
            list-style: none;
            /*display: none;*/
            background-color: blue;
            overflow: hidden;
            /*仿真模拟height:auto情况下的状况*/           
            max-height: 0px;
            transition: max-height 0.3s;
            /*多访问器适用*/
            -moz-transition: height 1s;
            -webkit-transition: height 1s;
            -o-transition: height 1s;
         }
         
         .banner:hover ul {
            /*display: block;*/
            width: 100%;
            max-height: 160px;
         }
         
         div ul li {
            overflow: hidden;
         }
         
         div ul li:hover {
            background-color: red;
         }
      /style
    /head

    body
      div >          div id= nav
            div id= nav-button-1 >              ul
                  li 1 /li
                  li 2 /li
                  li 3 /li
                  li 4 /li
              /ul
            /div
            div id= nav-button-2 >              ul
                  li 1 /li
                  li 2 /li
                  li 3 /li
              /ul
            /div
            div id= nav-button-3 >              ul
                  li 1 /li
                  li 2 /li
              /ul
            /div
            div id= nav-button-4 >              ul
                  li 1 /li
                  li 2 /li
                  li 3 /li
                  li 4 /li
                  li 5 /li
              /ul
            /div
            div id= nav-button-5 >              ul
                  li 1 /li
                  li 2 /li
                  li 3 /li
                  li 4 /li
                  li 5 /li
              /ul
            /div
          /div
                        center /center
      /div
    /body
/html 拷贝编码