简单滑动下拉列表
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.wrap {
width: 1000px;
height: 800px;
margin: 100px auto 0;
/*background-image: url(imgs/9.jpg);*/
background-color: skyblue;
padding-left: 100px;
}
.wrap li {
float: left;
width: 280px;
height: 30px;
padding: 10px;
position: relative;
}
.wrap a {
color: black;
text-decoration: none;
display: block;
width: 280px;
/*height: 60px;*/
text-align: center;
line-height: 30px;
color: white;
margin-top: 10px;
background-color: blue;
}
.wrap li ul {
position: absolute;
display: none;
}
.wrap img{
padding: 20px 0 0 0;
width: 200px;
height: 180px;
/*margin-top: 20px;*/
margin-left: 40px;
}
.photo1,.photo2{
width: 900px;
height: 800px;
margin-top: -36px;
}
.photo1{
background-image: url(imgs/10.jpg);
display: none;
}
.photo2{
background-image: url(imgs/11.jpg);
display: none;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$(".wrap li").hover(function () {
$(this).children("ul").slideToggle();
});
$(".button1").click(function(){
$(".photo1").toggle();
$(".photo2").hide();
});
$(".button2").click(function(){
$(".photo2").toggle();
$(".photo1").hide();
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#">静态逗逼图</a>
<ul>
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<!-- <li><a href="#">二级菜单3</a></li> -->
</ul>
</li>
<li>
<a href="#">动态逗逼图1</a>
<ul>
<img src="imgs/3.jpg">
<img src="imgs/4.jpg">
<img src="imgs/6.gif">
</ul>
</li><li>
<a href="#">动态逗逼图二</a>
<ul>
<img src="imgs/5.jpg">
<img src="imgs/7.jpg">
<img src="imgs/8.gif">
</ul>
</li>
</ul>
<button type="button" class="button1">切换背景1</button>
<button type="button" class="button2">切换背景2</button>
<!-- <input type="button" class="button1">切换背景1</input> -->
<!-- <input type="button" class="button2">切换背景2</input> -->
<div class="photo1"></div>
<div class="photo2"></div>
</div>
</body>
</html>
