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">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style type="text/css">
7 /* common styling */
8 /* set up the overall width of the menu div, the font and the margins */
9 .main {
10 height:40px;
11 padding:20px;
12 padding-bottom:20px;
13 width:750px;
14 background:#333333;
15 }
16 .menu {
17 font-family: arial, sans-serif;
18 width:750px;
19 }
20 /* remove the bullets and set the margin and padding to zero for the unordered list */
21 .menu ul {
22 padding:0;
23 margin:0;
24 list-style-type: none;
25 }
26 /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
27 .menu ul li {
28 float:left;
29 position:relative;
30 }
31 /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
32 .menu ul li a, .menu ul li a:visited {
33 display:block;
34 text-align:center;
35 text-decoration:none;
36 width:104px;
37 height:30px;
38 color:#000;
39 background:#333333;
40 line-height:30px;
41 font-size:11px;
42 }
43 /* make the dropdown ul invisible */
44 .menu ul li ul {
45 display: none;
46 }
47 /* specific to non IE browsers */
48 /* set the background and foreground color of the main menu li on hover */
49 .menu ul li:hover a {
50 color:#333333;
51 background:#CCCCCC;
52 font-weight:bold;
53 }
54 /* make the sub menu ul visible and position it beneath the main menu list item */
55 .menu ul li:hover ul {
56 display:block;
57 position:absolute;
58 top:31px;
59 left:0;
60 width:105px;
61 }
62 /* style the background and foreground color of the submenu links */
63 .menu ul li:hover ul li a {
64 display:block;
65 background:#333333;
66 color:#000;
67 }
68 /* style the background and forground colors of the links on hover */
69 .menu ul li:hover ul li a:hover {
70 background:#CCCCCC;
71 color:#000000;
72 }
73 </style>
74 </head>
75 <body>
76 <div class="main">
77 <div class="menu">
78 <ul>
79 <li><a class="hide" href="#">首页</a>
80
81 <ul>
82 <li><a href="#" title="The zero dollar ads page">1</a></li>
83 <li><a href="#" title="Wrapping text around images">2</a></li>
84 <li><a href="#" title="Styling forms">3</a></li>
85 </ul>
86 </li>
87 <li><a class="hide" href="#">学习理念</a>
88
89 <ul>
90 <li><a href="#" title="a coded list of spies">1</a></li>
91 <li><a href="#" title="a horizontal vertical menu">2</a></li>
92 <li><a href="#" title="an enlarging unordered list">3</a></li>
93 </ul>
94 </li>
95 <li><a class="hide" href="#">研究与应用</a>
96
97 <ul>
98 <li><a href="#" title="Cross browser fixed layout">1</a></li>
99 <li><a href="#" title="Cross browser fixed layout">2</a></li>
100 <li><a href="#" title="Cross browser fixed layout">3</a></li>
101 </ul>
102 </li>
103 <li><a class="hide" href="#">招新功能</a>
104
105 <ul>
106 <li><a href="#" title="a coded list of spies">1</a></li>
107 <li><a href="#" title="a horizontal vertical menu">2</a></li>
108 <li><a href="#" title="an enlarging unordered list">3</a></li>
109 </ul>
110 </li>
111 <li><a class="hide" href="#">交流园地</a>
112
113 <ul>
114 <li><a href="#" title="A drop down menu">1</a></li>
115 <li><a href="#" title="A cascading menu">2</a></li>
116 <li><a href="#" title="Using content:">3</a></li>
117 <li><a href="#" title=":hover applied to a div">4</a></li>
118 <li><a href="#" title="I can build a rainbow">5</a></li>
119
120 </ul>
121 </li>
122 <li><a class="hide" href="#">内部管理</a>
123 <ul>
124 <li><a href="#" title="Example one">1</a></li>
125 <li><a href="#" title="Weft fonts">2</a></li>
126 <li><a href="#" title="Vertical align">3</a></li>
127
128 </ul>
129 </li>
130 <li><a class="hide" href="#">联系我们</a>
131 <ul>
132 <li><a href="#" title="colour wheel">1</a></li>
133 <li><a href="#" title="a menu using opacity">2</a></li>
134 <li><a href="#" title="partial opacity">3</a></li>
135
136 </ul>
137 </li>
138 </ul>
139 <div class="clear"> </div>
140 </div>
141 </div>
142 </body>
143 </html>
View Code
