点击(此处)折叠或打开

<html>
<head>
<title>Jquery+CSS制作的感应鼠标滑出的下拉菜单丨亿诚-河北苗木</title>
<script type=\'text/javascript\' src=\'/images/jquery.js\'></script>
<style type=\"text/css\">
ul{
margin:0;padding:0;}
ul li{
list-style:none;}
#div{
width:960px;
height:36px;
background:#999;}
#div ul li{
float:left;
position:relative;
padding:0px 28px;
border-left:1px solid #fff;
height:36px;
line-height:36px;
font-weight:bold;}
#div ul li ul{
position:absolute;
z-index:99;
top:36px;
left:0px;
display:none;
width:154px;}
#div ul li ul li{
display:block;
width:154px;
height:26px;
line-height:26px;
background-color:#dddddd;
padding:0px 12px;
border-bottom:1px #ffffff solid;
font-weight:normal;}
#div ul li a{
color:#000000;
text-decoration:none;
font-size:12px;}
#div ul li a:hover{
color:#cc0000;}
</style>
</head>
<body>
<script type=\"text/javascript\">
$(function(){
$(\"#div ul li\").hover(
function(){$(this).children(\"ul\").slideDown()},
function(){$(this).children(\"ul\").slideUp()}
)
})
</script>
<div id=\"div\">
<ul>
<li><a href=\"#\">网页特效①</a>
<ul>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/cddh/\" title=\"\">菜单导航特效</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/tcys/\" title=\"\">图层样式特效</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/ljwb/\" title=\"\">链接文本特效</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/txtx/\" title=\"\">图形图像特效</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/sbtx/\" title=\"\">鼠标特效代码</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/ymck/\" title=\"\">页面窗口特效</a></li>
</ul>
</li>
<li><a href=\"#\">网页特效②</a>
<ul>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/wybj/\" title=\"\">网页背景特效</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/rqsj/\" title=\"\">日期时间特效</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/ymss/\" title=\"\">页面搜索特效</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/bgtx/\" title=\"\">表格表单特效</a></li>
<li><a target=\"_blank\" href=\"http://www.CsrCode.cn/html/txdm/qtdm/\" title=\"\">其他网页特效</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<div style=\"height:200px\"></div><br>如果不显示预览效果，请刷新一下本页面先~~~<br>所需js文件：<a href=\"/images/jquery.js\">jquery.js</a><hr>

ITPub博客

Jquery+CSS制作的感应鼠标滑出的下拉菜单

最新文章