二级菜单和广告悬浮的简单实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*设置边缘和内边距都为0*/
* {
margin: 0;
padding: 0;
}
/*menu下面的li列表属性为空*/
.menu li{
list-style: none;
}
.menu li {
width:120px;
height: 35px;
background-color: greenyellow;
color: white;
text-align: center;
line-height: 35px;
border-bottom: 1px solid lightgray;
overflow: hidden;
}
.menu>li:hover /*伪类:当鼠标停在上面显示隐藏的*/
{
height: auto;
overflow: hidden;
}
.menu li ul li {
/*width: 120px;
height: 35px;
line-height: 35px;*/
background-color: palevioletred;
/*color: white;
text-align: center;
border-bottom: 1px solid lightgray;*/
}
#dav {
width: 200px;
height: 200px;
background-color: blue;
position: fixed; /*固定定位*/
top: 100px;
right: 50px;
}
#abc {
float: right; /*浮动在右*/
border: none; /*边界为空*/
}
</style>
</head>
<body>
<div id = "dav">
<button id = "abc">关闭</button>
</div>
<ul class = "menu">
<li>
陕西省
<ul>
<li>西安市</li>
<li>咸阳市</li>
<li>安康市</li>
</ul>
</li>
<li>
江西省
<ul>
<li>南昌市</li>
<li>新余市</li>
<li>赣州市</li>
</ul>
</li>
<li>
四川省
<ul>
<li>成都市</li>
<li>自贡市</li>
<li>德阳市</li>
<li>遂宁市</li>
<li>资阳市</li>
</ul>
</li>
<li>
西藏自治区
<ul>
<li>拉萨市</li>
<li>日客则市</li>
<li>林芝市</li>
</ul>
</li>
</ul>
<!--当鼠标点击关闭三次才可以关闭掉
前两次都是跳转达到百度首页-->
<script>
var counter = 0
var closeBtn = document.getElementById('abc');
closeBtn.onclick = function() {
counter += 1;
if( counter ==3) {
var dav = document.getElementById('dav');
dav.style.display = "none";
}else{
window.open('http://www.baidu.com');
}
};
</script>
</body>
</html>