1、首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果（从网站上下载即可）
1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2、插入div（这里我的div是带有锚点效果的，已经用红色标出锚点，定位到了网页顶端，也就是<body>开始的地方写了一句<a name="top">top</a>，如果不给name一个初始值，就写上a href="#"同样有回到顶端的效果）
1 <div id="apDiv1" ><img src="img/logo.bmp" /> 2 <nav id="menu"> 3 <div class="daohang" style="background-image:url(img/bg.png)"> 4 <a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a> 5 <a href="about us.html" target="_blank"><div> 6 关于我们</div></a> 7 8 <a href="services.html" target="_blank"><div>咖啡文化</div></a> 9 10 <a href="price list.html" target="_blank"><div>价格清单</div></a>11 12 <a href="contact.html" target="_blank"><div>联系我们</div></a>13 14 </div>15 </nav>16 <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">17 <input style="color:#fff; border:none; 100%; background-image:url(img/menu-hover.png); font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /></div>18 <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>19 </div>
3、CSS样式表的制作(一些属性设置换上你们需要的属性就可以了)
1 /*————导航—————*/ 2 #apDiv1 { 3 position:fixed;//fixed;left:auto;top:auto用来实现悬浮的效果
4 left: auto; 5 top: auto; 6 bottom:auto; 7 237px; 8 height:auto; 9 z-index: 2;10 margin-top:-8px;11 margin-left:40px;12 text-align:center;14 font-size:16px;15 font-family:"黑体";16 color:#965D28;17 background-image:url(../img/bg.png);18 }19 #menu{20 display:none;21 }22 .daohang div{23 height: 30px;24 z-index: 2;25 margin:0 auto;26 text-align:center;27 padding-top:5px;28 overflow:hidden;29 padding-top:10px;30 color:965D28;31 }32 .daohang div:hover{33 height:30px;34 z-index:2;35 margin:0 auto;36 background-image:url(../img/menu-hover.png);37 text-align:center;38 overflow:visible;39 color:#fff;40 }41 42 .daohang li{43 margin-left:237px;44 list-style-type:none;45 background-color:#D3A23A;46 160px;47 line-height:30px;48 color:#422B1D;49 position:relative;50 top:-40px;51 background-image:url(../img/bg.jpg);52 border:solid thin;53 border-color:#965D28;54 z-index:1;55 }56 .daohang li:hover{57 margin-left:237px;58 list-style-type:none;59 background-color:#D3A23A;60 160px;61 line-height:50px;62 color:#fff;63 position:relative;64 top:-40px;65 border:solid thin;66 border-color:#965D28;67 background-image:url(../img/bg.png);68 z-index:1;69 }70 .daohang a:link,a:visited{71 text-decoration:none;72 color:#965D28;73 }74 .daohang a:hover{75 text-decoration:none;76 color:#fff;77 }
4、鼠标点击事件的触发（写在body里面）
1 <script>2 function menuvisible() {3 $("nav").toggle();/*开关*/4 } 5 </script>
代码示例：
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 <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>无标题文档</title> 7 <style> 8 #apDiv1 { 9 position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/ 10 left: auto; 11 top: auto; 12 bottom:auto; 13 width: 237px; 14 height:auto; 15 z-index: 2; 16 margin-top:-8px; 17 margin-left:40px; 18 text-align:center; 19 font-size:16px; 20 font-family:"黑体"; 21 color:#965D28; 22 background-image:url(../img/bg.png); 23 } 24 #menu{ 25 display:none; 26 } 27 .daohang div{ 28 height: 30px; 29 z-index: 2; 30 margin:0 auto; 31 text-align:center; 32 padding-top:5px; 33 overflow:hidden; 34 padding-top:10px; 35 color:965D28; 36 } 37 .daohang div:hover{ 38 height:30px; 39 z-index:2; 40 margin:0 auto; 41 background-image:url(../img/menu-hover.png); 42 text-align:center; 43 overflow:visible; 44 color:#fff; 45 } 46 .daohang li{ 47 margin-left:237px; 48 list-style-type:none; 49 background-color:#D3A23A; 50 width:160px; 51 line-height:30px; 52 color:#422B1D; 53 position:relative; 54 top:-40px; 55 background-image:url(../img/bg.jpg); 56 border:solid thin; 57 border-color:#965D28; 58 z-index:1; 59 } 60 .daohang li:hover{ 61 margin-left:237px; 62 list-style-type:none; 63 background-color:#D3A23A; 64 width:160px; 65 line-height:50px; 66 color:#fff; 67 position:relative; 68 top:-40px; 69 border:solid thin; 70 border-color:#965D28; 71 background-image:url(../img/bg.png); 72 z-index:1; 73 } 74 .daohang a:link,a:visited{ 75 text-decoration:none; 76 color:#965D28; } 77 .daohang a:hover{ 78 text-decoration:none; 79 color:#fff; 80 } 81 82 </style> 83 84 85 86 </head> 87 88 <body> 89 <script> 90 function menuvisible() 91 { 92 $("nav").slideToggle(1500);/*开关*/ 93 } 94 </script> 95 96 <div id="apDiv1" > 97 <img src="qwe.png" width=150 /> 98 <nav id="menu"> 99 <div class="daohang" style=" background-color:#630"> 100 <a href="index.html"> 101 <div style=" background-color:#FC0; color:#fff">首页 102 </div> 103 </a> 104 <a href="about us.html" target="_blank"><div>关于我们 105 </div> 106 </a> 107 108 <a href="services.html" target="_blank"><div>咖啡文化 109 </div></a> 110 <a href="price list.html" target="_blank"><div>价格清单 111 </div> 112 </a> 113 <a href="contact.html" target="_blank"><div>联系我们 114 </div></a> 115 </div> 116 </nav> 117 <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()"> 118 <input style="color:#fff; border:none; 100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /> 119 </div> 120 <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP 121 </a> 122 </div> 123 </div> 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 <br /> 187 <br /> 188 咖啡 189 190 </body> 191 </html>
效果图：
