                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

感觉这个方法并不实用啊加上overflow：hidden;

感觉这个方法并不实用啊加上overflow：hidden; 确实是可以不在顶部也达到这种效果但是一般情况是也有下拉菜单的使用overflow：hidden；以后下拉菜单就没有了求个能换成英文加显示下拉菜单的

慕移动7208282

2017-09-18

源自：形形色色的下拉菜单 4-2

关注问题我要回答

2096

操作

收起

3 回答

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱回答被采纳 +2 积分
2017-09-19

层次不是我写的，我直接在慕课练习上写的，我只是在上面改了一点代码，要这两样功能也就这样了，更好的办法我不知道，懒的去管。

0 回复有任何疑惑可以回复我~

收起回答

慕移动7208282 提问者

厉害了大佬很强

2017-09-19 回复有任何疑惑可以回复我~

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱
2017-09-19

/*我就是既把一级菜单换成英文的，又把二级菜单显示出来了*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .top-nav
        {
            font-size: 12px;
            font-weight: bold;
            list-style: none;
            border-bottom: 8px solid #DC4E1B;
            overflow: hidden;
        }
        .top-nav li
        {
            float: left;
            margin-right: 1px;
            margin-top:1px;
            position:relative;
        }
        .top-nav li a
        {
            line-height: 20px;
            text-decoration: none;
            background: #DDDDDD;
            color: #666666;
            display: block;
            width: 80px;
            text-align: center;
        }

        /*设置正常状态英文菜单隐藏*/
        .top-nav li span{display:none;}

        /*鼠标移动到链接上面时将英文菜单显示*/
        .top-nav li:hover span{display:block;}

        /*鼠标移动到链接上面时将中文菜单位置上移
        .top-nav li:hover {margin-top:-20px;} 这里注释了，后面3个li标签自然就不能上移了，
        两种方法适合两种情况*/

        .top-nav li ul{display:none;list-style:none;width:80px;}
        .top-nav li:hover ul{margin-top:-21px;display:block;} /*我前面在li上加了个margin-top:1px;所以这里要多移1px；*/

    </style>
</head>
<body>
    <ul class="top-nav">
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </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 回复有任何疑惑可以回复我~

收起回答

慕移动7208282 提问者

我试了试真的简直强力我先好好看下你这个代码

2017-09-19 回复有任何疑惑可以回复我~

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱回复慕移动7208282 提问者

其他没什么不同，就是整个把ul往上移就行了

2017-09-19 回复有任何疑惑可以回复我~

慕移动7208282 提问者回复钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱

感觉你写的代码层次很好很清晰我自己写的特别乱还老容易出错自己写的各种ul li ul li的选择器自己后来看着都烦

2017-09-19 回复有任何疑惑可以回复我~

查看1条回复

钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱
2017-09-19

那你把英文Home当作二级标题，然后移入效果是二级菜单往上走就行了
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        .top-nav li ul{display:none;list-style:none;width:80px;}
        .top-nav li:hover ul{margin-top:-20px;display:block;}