css3（十）练习导航栏

最新推荐文章于 2022-09-28 19:24:52 发布

不许偷苹果

最新推荐文章于 2022-09-28 19:24:52 发布

阅读量376

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/qq_38904347/article/details/82287865

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <style type="text/css">
        ul{
            width: 800px;
            height: 40px;
            line-height: 40px;
            background-color: #CCCCCC;
            border: 1px solid #CCCCCC;
            border-radius: 10px;
            margin:50px auto;
            padding-left: 20px;
            color: white;
            box-shadow: 2px 2px 1px 1px #EFEFEF;
        }
        li{
            float: left;
            list-style:none;
            position: relative;
            width:100px;
            text-align: center;
            margin-left: 30px;
        }
        li div{
            width: 200px;
            background: #333333;
            padding: 10px;
            padding-left: 0px;
            position: absolute;
            left: 0px;
            top:40px;
            display: none;
            animation: aa 1s linear 1;
        }
        div a{
            font-size: 12px;
            display: block;
            float: left;
            margin-left: 15px;
            margin-right: 15px;
            color: white;
            text-decoration: none;
        }
        li:hover{
            background: #333333;
        }
        li:hover div{
            display: block;

        }
        @keyframes aa{
                0%{transform: rotateX(0deg) rotateY(0deg);opacity:0.9;}
                30%{transform: rotateX(-20deg) rotateY(5deg);animation-timing-function: ease-in-out;}
                60%{transform: rotateX(20deg) rotateY(-5deg);animation-timing-function: ease-in-out;}
                100%{transform: rotateX(0deg) rotateY(0deg);animation-timing-function: ease-in-out;}
            }
    </style>
</head>
<body>
        <ul>
            <li>
                主菜单一
                <div>
                    <a href="#">子菜单1-1</a>
                    <a href="#">子菜单1-2</a>
                    <a href="#">子菜单1-3</a>
                </div>
            </li>
            <li>
                主菜单二
                <div>
                    <a href="#">子菜单2-1</a>
                    <a href="#">子菜单2-2</a>
                    <a href="#">子菜单2-3</a>
                    <a href="#">子菜单2-4</a>
                    <a href="#">子菜单2-5</a>
                    <a href="#">子菜单2-6</a>
                </div>
            </li>
            <li>
                主菜单三
                <div>
                    <a href="#">子菜单3-1</a>
                    <a href="#">子菜单3-2</a>
                    <a href="#">子菜单3-3</a>
                    <a href="#">子菜单3-4</a>
                </div>
            </li>
            <li>
                主菜单四
                <div>
                    <a href="#">子菜单4-1</a>
                    <a href="#">子菜单4-2</a>
                    <a href="#">子菜单4-3</a>
                    <a href="#">子菜单4-4</a>
                    <a href="#">子菜单4-5</a>
                </div>
            </li>
            <div style="clear: both;"></div>
        </ul>
</body>
</html>

不许偷苹果

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3（十）练习导航栏

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫

专栏目录