【html+css】一个简单好看特效的二级导航栏

最新推荐文章于 2024-07-16 16:43:05 发布

楠木有枫

最新推荐文章于 2024-07-16 16:43:05 发布

阅读量4.9k

点赞数 8

分类专栏：二级导航栏文章标签： html css

本文链接：https://blog.csdn.net/WILLLAULXF/article/details/109857613

版权

二级导航栏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

二级导航栏使用

前言
- 1.html部分
- 2.css部分
总结

前言

或许有某些小伙伴对二级导航栏的应用不是很熟悉，所以呢以下对二级导航栏进行一个示范

1.html部分

css代码如下（示例）：

<body>
    <ul class="nav1">
        <li>一级菜单
            <ul class="nav2">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="nav2">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="nav2">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>一级菜单
            <ul class="nav2">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</body>

2.css部分

css代码如下（示例）：

style type="text/css">
        * {
            margin: 0;
            padding: 0;
            cursor: default;
        }
        
        .nav1 {
            list-style: none;
            display: flex;
            width: 100%;
        }
        
        .nav1>li {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            flex: 1;
        }
        
        .nav2>li {
            height: 0;
            background-color: pink;
            overflow: hidden;
            margin-bottom: 3px;
            transition: 1s;
        }
        
        .nav1>li:hover .nav2>li {
            height: 50px;
        }
        
        .nav1>li:hover {
            background-color: pink;
            height: 50px;
        }
    </style>