|
Posted on
2014-06-14 21:55
fengyv
阅读( 300)
评论()
编辑
收藏
举报
- <span style="font-size:14px;"><!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="texthtml;charset=utf-8">
- <title>Menu</title>
- <style type="text/css">
- #nav
- {
- list-style: none;
- text-align: center;
- }
- #nav li
- {
- float: left;
- width: 100px;
- color: white;
- background-color: #3E3E3E;
- }
- #menu
- {
- list-style: none;
- padding: 5px;
- display: none;
- margin-left: -5px;
- margin-top: -5px;
- }
- #menu li
- {
- background-color: #ccc;
- width: 100px;
- text-align: left;
- padding-left: 10px;
- }
- #menu li a:link
- {
- text-decoration: none;
- display: block;
- }
- #menu li a:hover
- {
- background-color:#3E3E3E;
- color: white
- }
- </style>
- </head>
- <body>
- <ul id="nav">
- <li class="child">数 据 库
- <ul id="menu">
- <li><a href="http://blog.csdn.net/u011043843">MySQL</a></li>
- <li><a href="http://blog.csdn.net/u011043843">SQL Server</a></li>
- <li><a href="http://blog.csdn.net/u011043843">Oracle</a></li>
- <li><a href="http://blog.csdn.net/u011043843">DB2</a></li>
- </ul>
- </li>
- <li class="child">前台脚本
- <ul id="menu">
- <li><a href="http://blog.csdn.net/u011043843">JavaScript</a></li>
- <li><a href="http://blog.csdn.net/u011043843">Ruby</a></li>
- <li><a href="http://blog.csdn.net/u011043843">HTML</a></li>
- <li><a href="http://blog.csdn.net/u011043843">Python</a></li>
- </ul>
- </li>
- <li class="child">后台脚本
- <ul id="menu">
- <li><a href="http://blog.csdn.net/u011043843">PHP</a></li>
- <li><a href="http://blog.csdn.net/u011043843">ASP</a></li>
- <li><a href="http://blog.csdn.net/u011043843">ASP.NET</a></li>
- <li><a href="http://blog.csdn.net/u011043843">JSP</a></li>
- </ul>
- </li>
- </ul>
- <script type="text/javascript">
- var lis = document.getElementById("nav").getElementsByTagName('li');
- var i = 0;
-
- for( i = 0; i < lis.length; i++)
- {
- if(lis[i].className == "child")
- {
- lis[i].onmouseover = function()
- {
- var ulObj1 = this.getElementsByTagName('ul')[0];
- ulObj1.style.display = "block";
- this.style.backgroundColor="#ccc";
- this.style.color="black";
- }
- }
-
- lis[i].onmouseout = function()
- {
- var ulObj1 = this.getElementsByTagName('ul')[0];
- ulObj1.style.display = "none";
- this.style.backgroundColor="#3E3E3E";
- this.style.color="white";
- }
- }
-
- </script>
- </body>
- </html></span>
|