HTML/CSS方法实现中英文变换菜单显示

╰半橙微兮° 2022-01-27 04:37 230阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>下拉菜单</title>
        <style>
            a {
                color: #FFFF99;
                text-decoration: none;
            }
    
            a:hover {
                color: #FFFFFF;
                text-decoration: underline;
            }
    
            .top-nav {
                font-size: 16px;
                font-weight: bold;
                list-style: none;
                border-bottom: 8px solid #DC4E1B;
                overflow: auto;
            }
    
            .top-nav li {
                float: left;
            }
    
            .top-nav li a span {
                display: none;
            }
    
            .top-nav li a:hover span {
                display: block;
    
    
            }
    
            .top-nav li a:hover {
                /* 上移 */
                margin-top: -20px;
            }
    
            .top-nav li a {
                line-height: 20px;
                text-decoration: none;
                background: #DDDDDD;
                color: #666666;
                display: block;
                width: 80px;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div id="top">
            <ul class="top-nav">
                <li><a href="#">首页<span>Home</span></a></li>
                <li><a href="#">课程大厅<span>Course</span></a></li>
                <li><a href="#">学习中心<span>Learn</span></a></li>
                <li><a href="#">经典案例<span>Case</span></a></li>
                <li><a href="#">关于我们<span>About</span></a></li>
            </ul>
        </div>
    </body>
    
    </html>