1 <head>
2 <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>无标题文档</title>
5 <style>
6 #apDiv1 {
7 position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/
8 left: auto;
9 top: auto;
10 bottom:auto;
11 width: 237px;
12 height:auto;
13 z-index: 2;
14 margin-top:-8px;
15 margin-left:40px;
16 text-align:center;
17 font-size:16px;
18 font-family:"黑体";
19 color:#965D28;
20 background-image:url(../img/bg.png);
21 }
22 #menu{
23 display:none;
24 }
25 .daohang div{
26 height: 30px;
27 z-index: 2;
28 margin:0 auto;
29 text-align:center;
30 padding-top:5px;
31 overflow:hidden;
32 padding-top:10px;
33 color:965D28;
34 }
35 .daohang div:hover{
36 height:30px;
37 z-index:2;
38 margin:0 auto;
39 background-image:url(../img/menu-hover.png);
40 text-align:center;
41 overflow:visible;
42 color:#fff;
43 }
44 .daohang li{
45 margin-left:237px;
46 list-style-type:none;
47 background-color:#D3A23A;
48 width:160px;
49 line-height:30px;
50 color:#422B1D;
51 position:relative;
52 top:-40px;
53 background-image:url(../img/bg.jpg);
54 border:solid thin;
55 border-color:#965D28;
56 z-index:1;
57 }
58 .daohang li:hover{
59 margin-left:237px;
60 list-style-type:none;
61 background-color:#D3A23A;
62 width:160px;
63 line-height:50px;
64 color:#fff;
65 position:relative;
66 top:-40px;
67 border:solid thin;
68 border-color:#965D28;
69 background-image:url(../img/bg.png);
70 z-index:1;
71 }
72 .daohang a:link,a:visited{
73 text-decoration:none;
74 color:#965D28; }
75 .daohang a:hover{
76 text-decoration:none;
77 color:#fff;
78 }
79
80 </style>
81
82
83
84 </head>
85
86 <body>
87 <script>
88 function menuvisible()
89 {
90 $("nav").slideToggle(1400);/*开关*/
91 }
92 </script>
93
94 <div id="apDiv1" >
95 <img src="" />
96 <nav id="menu">
97 <div class="daohang" style=" background-color:#630">
98 <a href="index.html">
99 <div style=" background-color:#FC0; color:#fff">首页
100 </div>
101 </a>
102 <a href="about us.html" target="_blank"><div>关于我们
103 </div>
104 </a>
105
106 <a href="services.html" target="_blank"><div>咖啡文化
107 </div></a>
108 <a href="price list.html" target="_blank"><div>价格清单
109 </div>
110 </a>
111 <a href="contact.html" target="_blank"><div>联系我们
112 </div></a>
113 </div>
114 </nav>
115 <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">
116 <input style="color:#fff; border:none; width:100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" />
117 </div>
118 <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP
119 </a>
120 </div>
121 </div>
122 <br />
123 <br />
124 <br />
125 <br />
126 <br />
127 <br />
128 <br />
129 <br />
130 <br />
131 <br />
132 <br />
133 <br />
134 <br />
135 <br />
136 <br />
137 <br />
138 <br />
139 <br />
140 <br />
141 <br />
142 <br />
143 <br />
144 <br />
145 <br />
146 <br />
147 <br />
148 <br />
149 <br />
150 <br />
151 <br />
152 <br />
153 <br />
154 <br />
155 <br />
156 <br />
157 <br />
158 <br />
159 <br />
160 <br />
161 <br />
162 <br />
163 <br />
164 <br />
165 <br />
166 <br />
167 <br />
168 <br />
169 <br />
170 <br />
171 <br />
172 <br />
173 <br />
174 <br />
175 <br />
176 <br />
177 <br />
178 <br />
179 <br />
180 <br />
181 <br />
182 <br />
183 <br />
184 <br />
185 <br />
186 咖啡
187
188 </body>
