css下拉菜单写法

网页导航栏下拉效果

最新推荐文章于 2025-09-28 09:20:21 发布

转载最新推荐文章于 2025-09-28 09:20:21 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=hh1jbc1hj&title=css%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E5%86%99%E6%B3%95

前端专栏收录该内容

493 篇文章

订阅专栏

网页导航栏的下拉效果，通过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>