形形色色的下拉菜单 （菜单中文变英文+多级菜单）

来源：慕课网

<!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">
        .top-nav
        {
            margin-top:50px;
            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
        {
            /*margin-top: 20px;*/
            /*默认margin-top是0*/
            /*响应margin-top：-20后，超出了浏览器的可视区域*/
            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:#DC4E1B;
            color:white;
        }
        .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>

<!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">
            .top-nav {
                font-size: 12px;
                font-weight: bold;
                list-style: none;
            }
            .top-nav li {
                float: left;
                list-style: none;
                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:hover {
                background: #900;
                color: #FFF;
            }
            .top-nav ul {
                list-style: none;
                display: none;
                width: 80px;
                padding: 0;
                position: relative;
            }
            .top-nav li ul li ul {
                position: absolute;
                top: 0;
                left: 80px;
            }
            /* 使用CSS设置鼠标移动到一级菜单时，二级菜单显示，三级菜单隐藏 */
            
            .top-nav li:hover ul {
                display: block;
            }
            .top-nav li:hover ul li ul {
                display: none;
            }
            /* 使用CSS设置鼠标移动到二级菜单时，三级菜单显示 */
            
            .top-nav li ul li:hover ul {
                display: block;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                //判断是否为IE浏览器
                var isIF = !!window.ActiveXObject;
                var isIE6 = isIE && !window.XMLHttpRequest;
                if (isIE6) {
                    var Lis = document.getElementsByTagName("li");
                    for (var i = 0; i < Lis.length; i++) {
                        Lis[i].onmouseover = function() {
                            var u = this.getElementsByTagName("ul")[0];
                            //如果包含子菜单，就将子菜单显示
                            if (u != undefined) {
                                u.style.display = "block";
                            }
                        }
                        Lis[i].onmouseout = function() {
                            var u = this.getElementsByTagName("ul")[0];
                            //如果包含子菜单，就将子菜单隐藏
                            if (u != undefined) {
                                u.style.display = "none";
                            }
                        }
                    }
                }
            }
        </script>
    </head>

    <body>
        <ul class="top-nav">
            <li><a href="#">慕课网首页</a>
                <ul>
                    <li><a href="#">前端课程 +</a>
                        <ul>
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">css</a></li>
                            <li><a href="#">jquery</a></li>
                        </ul>
                    </li>
                    <li><a href="#">手机开发</a>
                        <ul>
                            <li><a href="#">ios开发</a></li>
                            <li><a href="#">android开发</a></li>
                            <li><a href="#">WP开发</a></li>
                        </ul>
                    </li>
                    <li><a href="#">后台编程</a></li>
                </ul>
            </li>
            <li><a href="#">课程大厅</a> </li>
            <li><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">前端课程 </a>
                        <ul>
                            <li><a href="#">javascript</a></li>
                            <li><a href="#">css</a></li>
                            <li><a href="#">jquery</a></li>
                        </ul>
                    </li>
                    <li><a href="#">手机开发</a>
                        <ul>
                            <li><a href="#">ios开发</a></li>
                            <li><a href="#">android开发</a></li>
                            <li><a href="#">WP开发</a></li>
                        </ul>
                    </li>
                    <li><a href="#">后台编程</a></li>
                </ul>
            </li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </body>

</html>
View Code

<!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">
            .top-nav {
                font-size: 14px;
                font-weight: bold;
                list-style: none;
            }
            .top-nav li {
                float: left;
                margin-right: 1px;
            }
            .top-nav li a {
                line-height: 34px;
                text-decoration: none;
                background: #3f240e;
                color: #fff;
                display: block;
                width: 80px;
                text-align: center;
            }
            .top-nav ul {
                list-style: none;
                display: none;
                padding: 0;
                position: absolute;
                height: 0;
                overflow: hidden;
            }
            .top-nav li a:hover {
                background: url(http://img.mukewang.com/5461b50d0001e28000010034.jpg) 0 0 repeat-x;
            }
            .note {
                color: #3f240e;
                display: block;
                background: url(http://img.mukewang.com/5461b50d0001e28000010034.jpg) 0 0 repeat-x;
            }
            .corner {
                display: block;
                height: 11px;
                background: url(http://img.mukewang.com/5461b5620001410d00170011.jpg) 31px 0 no-repeat;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var Lis = document.getElementsByTagName("li");
                for (var i = 0; i < Lis.length; i++) {
                    //鼠标经过时的效果
                    Lis[i].onmouseover = function() {
                        var u = this.getElementsByTagName("ul")[0];
                        if (u != undefined) {
                            u.style.display = "block";
                            ChangeH(u.id, 1);
                        }
                    }
                    Lis[i].onmouseleave = function() {
                        var u = this.getElementsByTagName("ul")[0];
                        if (u != undefined) {
                            ChangeH(u.id, -1);
                        }
                    }
                }
            }

            function ChangeH(id, count) {
                //    根据ID找到ulList，同时得到其高度
                var ulList = document.getElementById(id);
                var h = ulList.offsetHeight;
                h += count;
                if (count > 0) {
                    if (h <= 42) {
                        //    将高度赋值给ulList，同时，不断调用本函数
                        ulList.style.height = h + "px";
                        setTimeout("ChangeH('" + id + "',1)", 10);
                    } else {
                        return;
                    }
                } else {
                    if (h > 0) {
                        //    将高度赋值给ulList，同时，不断调用本函数
                        ulList.style.height = h + "px";
                        setTimeout("ChangeH('" + id + "',-1)", 10);
                    } else {
                        ulList.style.display = "none";
                        return;
                    }
                }
            }
        </script>
    </head>

    <body>
        <ul class="top-nav">
            <li><a href="#"><span class="note">慕课网</span></a> </li>
            <li><a href="#">课程大厅</a> </li>
            <li><a href="#">学习中心</a>
                <ul id="mnuUL">
                    <span class="corner"></span>
                    <li><a href="#">前端课程 </a></li>
                    <li><a href="#">手机开发</a> </li>
                    <li><a href="#">后台编程</a></li>
                </ul>
            </li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </body>

</html>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/XDJjy/p/4678732.html