首页 > > 网页制作 > css >

css下拉菜单写法

2018-06-24 01:51:59来源：未知阅读 ()

网页导航栏的下拉效果，通过div框的显示和隐藏实现。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            .nav{
                width: 600px;
                height: 35px;
                border: 1px solid black;
            }
            .nav-title{
                width: 100px;
                /*导航栏显示高度*/
                max-height: 35px;
                text-align: center;
                line-height: 35px;
                float: left;
                background-color: greenyellow;
                font-size: 20px;
                /*超出部分隐藏*/
                overflow: hidden;
                transition: 1s;
            }
            /*鼠标指示效果*/
            .nav-title:hover{
                cursor: pointer;
              /*显示下拉高度*/
                max-height: 500px;
                
            }
            .nav-title ul{
                list-style: none;
            }
            .nav-title li{
                width: 100px;
                height: 35px;
                background-color: burlywood;
            }
            .nav-title li{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <div class="nav-title">1
                <ul>
                <li>i</li>
                <li>a</li>
                <li>s</li>
                <li>f</li>
                
            </ul>
            </div>
            
            <div class="nav-title">2</div>
            <div class="nav-title">3</div>
            <div class="nav-title">4</div>
            <div class="nav-title">5</div>
        
                
            </div>
        </div>
    </body>
</html>