1 <html>
2 <head>
3 <title>1</title>
4 <style type='text/css'>
5 #box{
6 width:200px;
7 border:dashed 1px green;
8 float:left;
9 }
10 h5{
11 font-weight:normal;
12 text-align:center;
13 font-size:14px;
14 color:#333333;
15 line-height:25px;
16 margin:0px;
17 clear:both;
18 background-color:lightgreen;
19 cursor:pointer;
20 border:solid 1px green;
21 border-width:1px 0px;
22 }
23 ul.menu{
24 list-style-type:none;
25 border:solid 0px #aaaaaa;
26 margin:8px 18px;
27 margin-top:0px;
28 }
29 ul.menu li{
30 line-height:25px;
31 font-size:12px;
32 color:green;
33 text-align:center;
34 }
35 div.submenu{
36
37 }
38 </style>
39 </head>
40 <body>
41 <div id='box'>
42 <div class='div_submenu'>
43 <h5 onclick="fun('menu1');">菜单大类</h5>
44 <ul class='menu' id='menu1'>
45 <li>菜单各项1</li>
46 <li>菜单各项2</li>
47 <li>菜单各项3</li>
48 <li>菜单各项4</li>
49 </ul>
50 </div>
51 <div class='div_submenu'>
52 <h5 onclick="fun('menu2');">菜单大类</h5>
53 <ul class='menu' id='menu2'>
54 <li>菜单各项1</li>
55 <li>菜单各项2</li>
56 <li>菜单各项3</li>
57 <li>菜单各项4</li>
58 </ul>
59 </div>
60 <div class='div_submenu'>
61 <h5 onclick="fun('menu3');">菜单大类</h5>
62 <ul class='menu' id='menu3'>
63 <li>菜单各项1</li>
64 <li>菜单各项2</li>
65 <li>菜单各项3</li>
66 <li>菜单各项4</li>
67 </ul>
68 </div>
69 <div class='div_submenu'>
70 <h5 onclick="fun('menu4');">菜单大类</h5>
71 <ul class='menu' id='menu4'>
72 <li>菜单各项1</li>
73 <li>菜单各项2</li>
74 <li>菜单各项3</li>
75 <li>菜单各项4</li>
76 </ul>
77 </div>
78 </div>
79 <script language='javascript'>
80 function fun(str){
81 var object=document.getElementById(str);
82 if(object.style.display=='none'){
83 object.style.display='';
84 }else{
85 object.style.display='none';
86 }
87 }
88 </script>
89 </body>
90 </html>
