二级下拉菜单缓慢渐变

最新推荐文章于 2022-08-19 16:04:29 发布

若云止水

最新推荐文章于 2022-08-19 16:04:29 发布

阅读量1.1k

点赞数 1

分类专栏： html5 文章标签： html

本文链接：https://blog.csdn.net/weixin_41812346/article/details/106845055

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

二级下拉菜单缓慢渐变

transition属性与display属性相冲突，不能使用这两种属性达到渐变效果。
transition属性与height属性结合，
初始时二级菜单高度为0，通过溢出隐藏，使整个二级菜单在一开始就整个隐藏，
当鼠标悬停在一级菜单某项上时，通过高度的渐变，溢出部分逐渐减少，让二级菜单随着高度变化而显示出来，达到二级下拉菜单缓慢渐变的效果。

<!DOCTYPE html>

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <title>HTML实验1</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        header{
            background:#b6ff00;
            width:100%;
            height:100px;
            margin-bottom:10px;
            position:relative;
        }
        nav{
            position:absolute;/*相对于上面的用relative的元素*/
            bottom:5px;
            left:600px;
            cursor:pointer;
        }
        ul{
            list-style:none;
        }
            ul li {
                float: left;
                /*一级菜单向左浮动，使之水平排列*/
                background:#b200ff;
                text-decoration:none;
                color:#ffffff;
                font-weight:bold;
                display:block;
                line-height:40px;
                padding:0px 10px;
        }
        ul li a:hover{
            background:#0094ff;
        }
                ul li ul {
                    position: absolute;
                    /*绝对定位，相对于上面的用relative的元素*/
                    height:0;
                    overflow:hidden;
                    /*溢出时隐藏,
                        初始时高为0，
                        所以整个二级菜单都被隐藏。
                    */
                    background: #b200ff;
                    color: #ffffff;
                }
            ul li:hover ul{
                height:160px;
                transition:all 2s;
                /*transition属性与display属性冲突，
                    transition属性与height属性结合，
                    通过溢出隐藏，
                    让二级菜单随着高度变化而显示出来，
                    达到二级下拉菜单缓慢渐变的效果。
                */
            }
        #section{
            background:#ff6a00;
            width:100%;
            height:800px;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>
                    视频
                    <ul>
                        <li>
                            <a href="https://www.bilibili.com/"
                               target="_blank">
                            bilibili
                            </a>
                        </li>
                        <li>
                            <a href="https://v.qq.com/" 
                               target="_blank">
                            腾讯视频
                            </a>
                        </li>
                        <li>
                            <a href="https://www.iqiyi.com/"
                               target="_blank">
                            爱奇艺
                            </a>
                        </li>
                        <li>
                            <a href="https://www.youku.com/">
                            优酷
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    问答
                    <ul>
                        <li>
                            <a href="https://www.zhihu.com/signin?next=%2F"
                               target="_blank">
                            知乎
                            </a>
                        </li>
                        <li>
                            <a href="https://www.csdn.net/">
                            CSDN
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
    <!--网页头部里嵌套一个导航栏，由ul列表组成，
        利用ul嵌套构成一个二级的下拉菜单，
        当鼠标移动到相应的一级菜单项，
        将会展开对应的二级菜单，
        利用transition属性使二级菜单缓缓展开，
        -->
    <section id="section">

    </section>
</body>
</html>

若云止水

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
二级下拉菜单缓慢渐变

二级下拉菜单缓慢渐变transition属性与display属性相冲突，不能使用这两种属性达到渐变效果。transition属性与height属性结合，初始时二级菜单高度为0，通过溢出隐藏，使整个二级菜单在一开始就整个隐藏，当鼠标悬停在一级菜单某项上时，通过高度的渐变，溢出部分逐渐减少，让二级菜单随着高度变化而显示出来，达到二级下拉菜单缓慢渐变的效果。<!DOCTYPE html><html lang="en" ><head> <meta
复制链接

扫一扫