jquery 单击显示下拉菜单层简单的示例

最新推荐文章于 2023-09-26 15:51:56 发布

wmnmtm

最新推荐文章于 2023-09-26 15:51:56 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/wmnmtm/article/details/82922212

版权

<!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>
<title>jQuery+CSS打造的弹出层菜单</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<style>
body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{
  padding:0;margin:0;
}
li{
  list-style:none;
}
img{
  border:none;
}
em{
  font-style:normal;
}
a{
  color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();
}
a:hover{
  color:#000;text-decoration:underline;
}
body{
  font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;
}
.clear{
  height:0;overflow:hidden;clear:both;
}
.UpLayer{
  //margin:100px;
}
.UpLayer dl dt{ /* 主菜单 */
  width:auto;position:absolute; z-index:3;padding:0px;height:20px;line-height:20px;
}

.UpLayer dl dd{ /* 下拉菜单 */
width:100px;position:absolute;z-index:2;border:#ccc 1px solid;padding:5px; line-height:20px; background:#f1f1f1; display:none; margin:19px 0 0 -1px;
}
.UpLayer dl dd a{
display:block;border-bottom:#ccc 1px dashed;
}

.UpLayer02{
border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;
}
</style>

<div style="clear:both;width:100%;height:20px;background-color:#B50F0F;line-height:20px;color:#FFFFFF;">
首页资讯新闻图片论坛
</div>

<div class="UpLayer">
<dl>
  <dt><a href="javascript:void(0)">单击此处，将显示弹出菜单层</a></dt>
  <dd>
   <a href="http://www.feizhuwang.com">农产品供求信息</a>
   <a href="#">热门文章</a>
   <a href="#">联系站长</a>
   <a href="#">时光勿勿</a>
  </dd>
</dl>
</div>

<br><br>
提示：如果网页有出错提示，请刷新页面再试。
<br />
<p></p>
</body>
</html>