导航栏

navi.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>自己做的</title>
 6     <link rel="stylesheet" type="text/css" href="navi_css.css">
 7     <script type="text/javascript" src="navi_js.js"></script>
 8 </head>
 9 <body>
10     <ul>
11         <li onmouseover="show(this)" onmouseout="hide(this)">
12             <a href="#1">栏目1</a>
13             <ul>
14                 <li><a href="#11">栏目1--菜单1</a></li>
15                 <li><a href="#12">栏目1--菜单2</a></li>
16                 <li><a href="#13">栏目1--菜单3</a></li>
17                 <li><a href="#14">栏目1--菜单4</a></li>
18             </ul>
19         </li>
20         <li onmouseover="show(this)" onmouseout="hide(this)">
21             <a href="#2">栏目2</a>
22             <ul>
23                     <li><a href="#21">栏目2--菜单1</a></li>
24                     <li><a href="#22">栏目2--菜单2</a></li>
25                     <li><a href="#23">栏目2--菜单3</a></li>
26                     <li><a href="#23">栏目2--菜单4</a></li>
27                     <li><a href="#23">栏目2--菜单5</a></li>
28             </ul>
29         </li>
30         <li onmouseover="show(this)" onmouseout="hide(this)">
31             <a href="#3">栏目3</a>
32             <ul>
33                 <li onmouseover="show(this)" onmouseout="hide(this)">
34                     <a href="#31">栏目3--菜单1</a>
35                     <ul>
36                         <li><a href="#311">菜单1--子菜单1</a></li>
37                         <li><a href="#312">菜单1--子菜单2</a></li>
38                         <li><a href="#313">菜单1--子菜单3</a></li>
39                         <li><a href="#314">菜单1--子菜单4</a></li>
40                     </ul>
41                 </li>
42                 <li><a href="#32">栏目3--菜单2</a></li>
43                 <li onmouseover="show(this)" onmouseout="hide(this)">
44                     <a href="#33">栏目3--菜单3</a>
45                     <ul>
46                         <li><a href="#331">菜单3--子菜单1</a></li>
47                         <li><a href="#332">菜单3--子菜单2</a></li>
48                         <li><a href="#333">菜单3--子菜单3</a></li>
49                     </ul>
50                 </li>
51             </ul>
52         </li>
53     </ul>
54 </body>
55 </html>


navi_css.css

 1 *{
 2     margin: 0;
 3     padding: 0;
 4 }
 5 
 6 a{
 7     text-decoration: none;
 8     display:block;
 9 }
10 
11 a:link, a:visited{
12     color: black;
13 }
14 
15 a:hover{
16     color: white;
17     background-color: #4E9EEF;
18 }
19 
20 li ul li a:hover{
21     background-color: #6b839c;
22 }
23 
24 ul li{
25     list-style-type: none;
26     float: left;
27     line-height: 40px;
28     text-align:center; 
29     font-size: small;
30     width:130px; 
31     height:40px;
32     background-color:#C5DBF2;
33     border:solid white;
34     border-width:1px 1px 0 0;
35 }
36 
37 li ul{
38     display: none;
39 }
40 
41 li ul li ul{
42     margin-top: -41px;
43     margin-left: 131px;
44 }

 

navi_js.js

1 function show(li) {
2     var t = li.getElementsByTagName("ul")[0];
3     t.style.display = "block";
4 }
5 
6 function hide(li) {
7     var t = li.getElementsByTagName("ul")[0];
8     t.style.display = "none";
9 }

 

posted @ 2015-12-19 18:32  哟风  Views(137)  Comments(0)  Edit  收藏  举报