css实现-巧用变化菜单

来源：互联网发布：软件著作权资料编辑：程序博客网时间：2024/06/10 23:30

//以下是慕课网看到的例子，自己再写了一遍，只用CSS实现的类似JS的变换下拉菜单效果，思想比较独特，可以借鉴//
* 复制粘贴即可使用，效果不错*

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .top-nav        {            font-size: 12px;            font-weight: bold;            list-style: none;            border-bottom: 8px solid #DC4E1B;            overflow: auto;        }        .top-nav li        {            float: left;            margin-right: 1px;        }        .top-nav li a        {            line-height: 20px;            text-decoration: none;            background: #DDDDDD;            color: #666666;            display: block;            width: 80px;            text-align: center;        }        /*设置正常状态英文菜单隐藏*/        .top-nav li a span{            display:none;        }        /*鼠标移动到链接上面时将英文菜单显示*/        .top-nav li a:hover span{            display:block;            background-color: #DC4E1B;            color: #fff;        }        /*鼠标移动到链接上面时将中文菜单位置上移*/        .top-nav li a:hover{            margin-top:-20px;        }    </style></head><body>    <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>About</span></a></li>    </ul></body></html>

0 0