形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

时间：2023-03-09 08:37:30
形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现） 
形行色色的下拉菜单（HTML/CSS JS方法  jQuery方法实现）

HTML/CSS方法实现下拉菜单
来源：慕课网
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0px; padding:0px;}/*清除所有默认格式*/

 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
/*一级菜单背景色，宽度，高度，上下边距为零左右居中*/
 ul{ list-style:none;}/×清除ul固定格式（小点）×/

 ul li{ line-height:40px; text-align:center;float:left;}
/×行距，文字居中，浮动横向显示×/

 a{ text-decoration:none; color:#000; display:block; width:90px;}
/×a{ color:#000; text-decoration:none; padding-top:4px; display:block; width:97px; height:22px ;text-align:center;  background-color:#ececec;  margin-left:2px;   list-style-type:none; }字体颜色，下划线，模型内部到顶部距离，显示，宽度，高度，文字居中，背景颜色，模型外部到左侧距离×/
a:hover{ color:#FFF; background-color:#666;}
/×鼠标掠过是，a标签链接颜色，背景颜色×/
ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 
/×清除浮动影响，上外边界间距，背景颜色×/

 ul li ul{width:90px;display:none;}
/×二级菜单，默认不显示×/

 ul li:hover ul{ display:block;}
/×鼠标掠过时，显示以块状元素显示ul二级菜单×/

</style>

</head>

<body>

<div id="menu">

<ul>

  <li><a href="#">首页</a></li>

  <li><a href="#">课程大厅</a>

    <ul>

      <li><a href="#">javascript</a></li>

      <li><a href="#">jQuery</a></li>

    </ul>

  </li>

  <li><a href="#">学习中心</a>

    <ul>

      <li><a href="#">视频学习</a></li>

      <li><a href="#">案例学习</a></li>

      <li><a href="#">交流平台</a></li>

    </ul>

  </li>

  <li><a href="#">经典案例</a></li>

  <li><a href="#">关于我们</a></li>

</ul>

</div>

</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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0px; padding:0px;}

 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}

 ul{ list-style:none;}

 ul li{ line-height:40px; text-align:center; float:left;}

 a{ text-decoration:none; color:#000; display:block; width:90px;}

 a:hover{ color:#FFF; background-color:red;}

 ul li ul li{ float:none;margin-top:2px; background-color:#eee; }

 ul li ul{width:90px; display:none;}

ul li:hover ul{display:block;}

</style>

</head>

<body>

<div id="menu">

<ul>

  <li><a href="#">首页</a></li>

  <li><a href="#">课程大厅</a>

    <ul>

      <li><a href="#">javascript</a></li>

      <li><a href="#">jQuery</a></li>

    </ul>

  </li>

  <li><a href="#">学习中心</a>

    <ul>

      <li><a href="#">视频学习</a></li>

      <li><a href="#">案例学习</a></li>

      <li><a href="#">交流平台</a></li>

    </ul>

  </li>

  <li><a href="#">经典案例</a></li>

  <li><a href="#">关于我们</a></li>

</ul>

</div>

</body>

</html>

JS方法

形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0px; padding:0px;}

/*body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}*/

#nav{ width:600px;font-size:15px; height:40px; background-color:#eee; margin:0 auto;}

ul{ list-style:none;}

ul li{ float:left; line-height:40px; text-align:center; width:100px;}

a{ text-decoration:none; color:#000; display:block;}

a:hover{ color:#F00; background-color:#666;}

ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}

ul li ul{display:none;}

</style>

 <script type="text/javascript">

        function ShowSub(li) {

            var subMenu =li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function HideSub(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>

</head>

<body>

<div id="nav">

<ul>

  <li><a href="#">首页</a></li>

  <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)"><a href="#">课程大厅</a>

     <ul>

         <li><a href="#">JavaScript</a></li>

         <li><a href="#">Html/CSS</a></li>

     </ul>

  </li>

  <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)"><a href="#">学习中心</a>

      <ul>

         <li><a href="#">视频学习</a></li>

         <li><a href="#">实例练习</a></li>

         <li><a href="#">问与答</a></li>

     </ul>  

  </li>

  <li><a href="#">经典案例</a></li>

  <li><a href="#">关于我们</a></li>

</ul>

</div>

</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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0px; padding:0px;}

/*body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}*/

#nav{ width:600px;font-size:15px; height:40px; background-color:#eee; margin:0 auto;}

ul{ list-style:none;}

ul li{ float:left; line-height:40px; text-align:center; width:100px;}

a{ text-decoration:none; color:#000; display:block;}

a:hover{ color:#F00; background-color:#666;}

ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}

ul li ul{display:none;}

</style>

 <script type="text/javascript">

        function ShowSub(li) {

            var subMenu =li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function HideSub(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>

</head>

<body>

<div id="nav">

<ul>

  <li><a href="#">首页</a></li>

  <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)"><a href="#">课程大厅</a>

     <ul>

         <li><a href="#">JavaScript</a></li>

         <li><a href="#">Html/CSS</a></li>

     </ul>

  </li>

  <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)"><a href="#">学习中心</a>

      <ul>

         <li><a href="#">视频学习</a></li>

         <li><a href="#">实例练习</a></li>

         <li><a href="#">问与答</a></li>

     </ul>  

  </li>

  <li><a href="#">经典案例</a></li>

  <li><a href="#">关于我们</a></li>

</ul>

</div>

</body>

</html>

jQuery方法实现

形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0px; padding:0px;}

 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}

 ul{ list-style:none;}

 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}

 a{ text-decoration:none; color:#000; display:block; width:90px;}

 a:hover{ color:#FFF; background-color:#666;}

 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; }

 ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}

</style>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

  $(function(){

     $(".navmenu").mouseover(function(){

         $(this).children("ul").show();

     })

     $(".navmenu").mouseout(function(){

         $(this).children("ul").hide();

     })

  })

</script>

</head>

<body>

<div id="menu">

 <ul>

   <li><a href="#">首页</a></li>

   <li class="navmenu"><a href="#">课程大厅</a>

      <ul>

         <li><a href="#">JavaScript</a></li>

         <li><a href="#">jQuery</a></li>

      </ul>

   </li>

   <li class="navmenu"><a href="#">学习中心</a>

      <ul>

         <li><a href="#">视频学习</a></li>

         <li><a href="#">案例学习</a></li>

         <li><a href="#">交流平台</a></li>

      </ul>

   </li>

   <li><a href="#">经典案例</a></li>

   <li><a href="#">关于我们</a></li>

</ul>

</div>

          </body>

</html>

浏览器兼容性（css hover实现）+ 多级菜单

<!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 isIE = !!window.ActiveXObjet;

                var isE6 = 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>

浏览器兼容性（js实现）+ 多级菜单

<!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设置鼠标移动到一级菜单时，二级菜单显示，三级菜单隐藏 */

        </style>

        <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

        <script type="text/javascript">

            $(function(){

                $("li").has("ul").mouseover(function(){

                    $(this).children("ul").css("display","block");

                }).mouseout(function(){

                    $(this).children("ul").css("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>

相关文章