多个下拉菜单

公告

View Post

html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/demo1.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo1.js"></script>
</head>
<body>
<div id="header">
<div id="h-icon">
<img src="img/ruanmoulogo.jpg">
</div>
</div>
<div id="nav">
<div id="nav-icon">
<ul>
<li class="li-item">
<a href="javascript:;" >IT互联网1</a>
<ul class="ul-item">
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
</ul>
</li>
<li class="li-item">
<a href="javascript:;">IT互联网2</a>
<ul class="ul-item">
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
</ul>
</li>
<li class="li-item">
<a href="javascript:;">IT互联网3</a>
<ul class="ul-item">
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
</ul>
</li>
<li class="li-item">
<a href="javascript:;">IT互联网4</a>
<ul class="ul-item">
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
</ul>
</li>
<li class="li-item">
<a href="javascript:;">IT互联网5</a>
<ul class="ul-item">
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
<li><a href="javascript:;">前端</a></li>
</ul>
</li>
</ul>
</div>

</div>
</body>
</html>

css:

*{
padding:0px;
margin:0px;
list-style-type:none;
}

#header{
width:100%;
height:40px;

}
a{
text-decoration:none;
color:#808080;
}
#h-icon{
width:900px;
height:40px;
margin:0 auto;
border:solid 1px red;
}
#nav{
width:100%;
height:36px;
background-color:#000;

}

#nav-icon{
width:900px;
height:36px;
margin:0 auto;
}
.li-item{
float:left;
margin-left:10px;
}
.li-item a{
display:block;
color:#fff;
width:100px;
height:36px;
line-height:36px;
}

.ul-item li a{
background-color:#808080;
font-size:14px;
padding-left:3px;
}
.ul-item li{
border-bottom:solid 1px #fff;
}

.ul-item li .bg{
background-color:#000;
}

js:

/// <reference path="jquery-1.10.2.min.js" />
$(function () {
$(".ul-item").hide();
$(".li-item").hover(function () {
$(this).find(".ul-item").stop(true,true).slideDown();
}, function () {
$(this).find(".ul-item").stop(true, true).slideUp();
});

$(".ul-item li a").hover(function () {
$(this).addClass("bg");
}, function () {
$(this).removeClass("bg");
});

//总结stop（）
//$("#box").stop();//默认的
//$("#box").stop(true);//暂停
//$("#box").stop(true, true);//立马停止

});

posted on 2018-03-12 16:53 sunshinezjb 阅读(254) 评论(0) 收藏举报

刷新页面返回顶部