js实现简单的下拉菜单

最新推荐文章于 2024-09-18 18:14:20 发布

天南韩立

最新推荐文章于 2024-09-18 18:14:20 发布

阅读量1.2w

点赞数 6

JavaScript 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 1 订阅

订阅专栏

转自:慕课网。

效果图如下:

代码如下:

<!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; 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 displaySubMenu(li) {

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

            subMenu.style.display = "block";

        }

        function hideSubMenu(li) {

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

            subMenu.style.display = "none";

        }

    </script>
</head>

<body>
<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>  
  </li>
  <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(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>

资源下载地址:http://download.csdn.net/download/u014175572/9360689