下拉菜单过渡效果

最新推荐文章于 2022-04-02 20:58:19 发布

怜眸

最新推荐文章于 2022-04-02 20:58:19 发布

阅读量1.1k

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/weixin_44588946/article/details/90266133

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里给大家分享的功能是下拉菜单过渡效果

效果图：
在这里插入图片描述
Html代码：

 <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>下拉菜单过渡效果</title>
        <link href="~/Plugins/style.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div>
            <ul class="nav">
                <li>
                    <a href="Javasctipt:;">文件</a>
                    <ul class="Detail">
                        <li><a href="Javasctipt:;">新建</a></li>
                        <li><a href="Javasctipt:;">打开</a></li>
                        <li><a href="Javasctipt:;">保存</a></li>
                        <li><a href="Javasctipt:;">关闭</a></li>
                    </ul>
                </li>
                <li>
                    <a href="Javasctipt:;">编辑</a>
                    <ul class="Detail">
                        <li><a href="Javasctipt:;">撤销</a></li>
                        <li><a href="Javasctipt:;">重做</a></li>
                        <li><a href="Javasctipt:;">复制</a></li>
                        <li><a href="Javasctipt:;">剪切</a></li>
                        <li><a href="Javasctipt:;">粘贴</a></li>
                    </ul>
                </li>
                <li>
                    <a href="Javasctipt:;">视图</a>
                    <ul class="Detail">
                        <li><a href="Javasctipt:;">错误列表</a></li>
                        <li><a href="Javasctipt:;">输出</a></li>
                        <li><a href="Javasctipt:;">工具箱</a></li>
                        <li><a href="Javasctipt:;">通知</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
    </html>

Css代码：

body {
    margin: 0;
    padding: 0;
}
a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #CA5100;
}
.nav li {
    display: inline-block;
    padding: 10px 20px;
    position: relative;
    transition: all .5s ease;
}
.nav li:hover {
    background: #CB7900;
}
.nav li:hover .Detail {
    background: #CB7900;
    top: 41px
}
.nav li:hover a {
    margin-top: 2px;
}
.Detail {
    transition: all 1s ease;
    background: #CB7900;
    width: 100px;
    z-index: -1;
    position: absolute;
    top: -124px;
    left: -1px;
}
.Detail li {
    display: block;
    padding: 5px 23px;
    padding-right: 0;
}
.Detail li:hover {
    background: #CBA200;
}

怜眸

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单过渡效果

在这里给大家分享的功能是下拉菜单过渡效果效果图：Html代码： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>下拉菜单过渡效果</title&...
复制链接

扫一扫