<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #apDiv1 { position:fixed;/*fixed;left:auto;top:auto用来实现悬浮的效果*/ left: auto; top: auto; bottom:auto; width: 237px; height:auto; z-index: 2; margin-top:-8px; margin-left:40px; text-align:center; font-size:16px; font-family:"黑体"; color:#965D28; background-image:url(../img/bg.png); } #menu{ display:none; } .daohang div{ height: 30px; z-index: 2; margin:0 auto; text-align:center; padding-top:5px; overflow:hidden; padding-top:10px; color:965D28; } .daohang div:hover{ height:30px; z-index:2; margin:0 auto; background-image:url(../img/menu-hover.png); text-align:center; overflow:visible; color:#fff; } .daohang li{ margin-left:237px; list-style-type:none; background-color:#D3A23A; width:160px; line-height:30px; color:#422B1D; position:relative; top:-40px; background-image:url(../img/bg.jpg); border:solid thin; border-color:#965D28; z-index:1; } .daohang li:hover{ margin-left:237px; list-style-type:none; background-color:#D3A23A; width:160px; line-height:50px; color:#fff; position:relative; top:-40px; border:solid thin; border-color:#965D28; background-image:url(../img/bg.png); z-index:1; } .daohang a:link,a:visited{ text-decoration:none; color:#965D28; } .daohang a:hover{ text-decoration:none; color:#fff; } </style> </head> <body> <script> function menuvisible() { $("nav").slideToggle(1500);/*开关*/ } </script> <div id="apDiv1" > <img src="" width="90" /> <nav id="menu"> <div class="daohang" style=" background-color:#630"> <a href="index.html"> <div style=" background-color:#FC0; color:#fff">首页 </div> </a> <a href="about us.html" target="_blank"><div>关于我们 </div> </a> <a href="services.html" target="_blank"><div>咖啡文化 </div></a> <a href="price list.html" target="_blank"><div>价格清单 </div> </a> <a href="contact.html" target="_blank"><div>联系我们 </div></a> </div> </nav> <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()"> <input style="color:#fff; border:none; 100%; background-color:#630; font-family:'黑体'; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /> </div> <div style="background-image:url(img/bg.png)"><a href="#"style="text-decoration:none; color:#965D28;line-height:30px;">TOP </a> </div> </div> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 咖啡 </body> </html>
——————————————————————————————————————————
