<!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.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:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;}
.UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;}
.UpLayer dl dd{ width:80px;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;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var objStr = ".UpLayer";
$(objStr).each(function(i){
$(this).mouseover(function(){
$($(objStr+" dd")[i]).show();
$($(objStr+" dt")[i]).addClass("UpLayer02");
});
$(this).hover(function(){},function(){
$($(objStr+" dd")[i]).hide();
$($(objStr+" dt")[i]).removeClass("UpLayer02");
});
});
});
</script>
</head>
<body>
<!-- 【经典】弹出层菜单 -->
<div class="UpLayer">
<dl>
<dt><a href="javascript:void(0)">弹出层</a></dt>
<dd>
<a href="#">手机资讯</a>
<a href="#">热门文章</a>
<a href="#">联系站长</a>
<a href="#">时光勿勿</a>
</dd>
</dl>
</div><br><br>
提示：如果网页有出错提示，请刷新页面再试。
<br />
<p><a href="http://www.iiwnet.com">
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery+CSS打造的弹出层菜单</title>
<script src="jquery.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:50px;position:absolute; z-index:3;padding:0 5px;line-height:20px;}
.UpLayer02{border:#ccc 1px solid; border-bottom:none;background:#f1f1f1; margin:-1px 0 0 -1px;}
.UpLayer dl dd{ width:80px;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;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var objStr = ".UpLayer";
$(objStr).each(function(i){
$(this).mouseover(function(){
$($(objStr+" dd")[i]).show();
$($(objStr+" dt")[i]).addClass("UpLayer02");
});
$(this).hover(function(){},function(){
$($(objStr+" dd")[i]).hide();
$($(objStr+" dt")[i]).removeClass("UpLayer02");
});
});
});
</script>
</head>
<body>
<!-- 【经典】弹出层菜单 -->
<div class="UpLayer">
<dl>
<dt><a href="javascript:void(0)">弹出层</a></dt>
<dd>
<a href="#">手机资讯</a>
<a href="#">热门文章</a>
<a href="#">联系站长</a>
<a href="#">时光勿勿</a>
</dd>
</dl>
</div><br><br>
提示：如果网页有出错提示，请刷新页面再试。
<br />
<p><a href="http://www.iiwnet.com">
</body>
</html>
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
