简单的html+css网页下拉导航菜单

小泽 2019-11-08 18:16 1条评论

css代码 如下:  

<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>

html代码 如下:

<div class="nav-container">

            <div id="nav">

                <div id="nav-button-1" class="banner">第1个导航

                    <ul>

                        <li>我是第一个</li>

                        <li>我是第二个</li>

                        <li>我是第三个</li>

                        <li>我是第四个</li>

                    </ul>

                </div>

                <div id="nav-button-2" class="banner">第2个导航

                    <ul>

                      <li>我是第一个</li>

                        <li>我是第二个</li>

                       

                    </ul>

                </div>

                <div id="nav-button-3" class="banner">第3个导航

                    <ul>

                      <li>我是第一个</li>

                        <li>我是第二个</li>

                        <li>我是第三个</li>

                        <li>我是第四个</li>

                    </ul>

                </div>

                <div id="nav-button-4" class="banner">第4个导航

                    <ul>

                          <li>我是第一个</li>

                        <li>我是第二个</li>

                        <li>我是第三个</li>

                     

                    </ul>

                </div>

                <div id="nav-button-5" class="banner">第5个导航

                    <ul>

                         <li>我是第一个</li>

                        <li>我是第二个</li>

                        <li>我是第三个</li>

                        <li>我是第四个</li>

                        <li>我是第五个</li>

                    </ul>

                </div>

            </div>

        </div>

效果图 如下:

20191108181607654.jpg

本文标签: html, 下拉导航菜单, css
0.0

说点什么吧
  • 全部评论(0