HTML连载71-翻转菜单练习

最新推荐文章于 2024-09-03 22:44:39 发布

睿里睿气

最新推荐文章于 2024-09-03 22:44:39 发布

阅读量109

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44630050/article/details/104548218

版权

HTML 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

一、翻转菜单练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D174_OverturnMenu</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul{
            width: 400px;
            height: 40px;
            margin:0 auto;
            margin-top: 100px;
            background-color: yellow;
        }
        .nav>li {
            list-style: none;
            float:left;
            width: 120px;
            height: 40px;
            margin-left:10px;
            background-color: green;
            line-height: 40px;
            text-align: center;
        }
        .sub{
            /*display: none;!*代表不显示元素*!*/
        }
        .sub>li{
            list-style: none;
            background-color: red;
            transform:rotateY(180deg);
            transition:all;
            /*opacity: 0;!*透明度，取值0-1*!*/

        }
        .nav>li:hover .sub li{
            transform:none;
        }
        .nav>li:hover .sub li:nth-child(1){
            transform:none;
            transition-delay:200ms;
        }
        .nav>li:hover .sub li:nth-child(2){
            transform:none;
            transition-delay:400ms;
        }
        .nav>li:hover .sub li:nth-child(3){
            transform:none;
            transition-delay:600ms;
        }
        .nav>li .sub li:nth-child(3){
            transform:none;
            transition-delay:200ms;
        }
        .nav>li .sub li:nth-child(2){
            transform:none;
            transition-delay:400ms;
        }
        .nav>li .sub li:nth-child(1){
            transform:none;
            transition-delay:600ms;
        }
</style>
</head>
<body>
<ul class="nav" >
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单</li>
    <li>一级菜单</li>
</ul>
</body>
</html>

71.1
二、源码：
D174_OverturnMenu.html
D173_ShadowOfBoxAndWord.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D174_OverturnMenu.html
https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
71.2