<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
height: 100%;
}
#menu{
border:1px solid #FF00B4;
overflow: hidden;
}
#left{
width: 80px;
height: 50px;
border:1px solid red;
line-height: 50px;
text-align: center;
font-size: 20px;
float: left;
}
#right{
float: right;
}
#right ul{
list-style: none;
}
#right ul li{
display: inline-block;
text-align: center;
}
#right ul li a{
display: inline-block;
height: 50px;
line-height: 50px;
text-decoration: none;
margin-right:20px;
}
.btn{
width: 50px;
height: 50px;
background: aqua;
float: right;
display: none;
}
@media screen and (max-width:489px){
#menu{
position: relative;
}
#right ul{
display: none;
}
.btn{
display: block;
}
#right{
width: 100%;
}
#right ul li{
text-align: center;
display: block;
}
#right ul li a{
width: 100%;
border-top:1px solid #F4EFEF;
}
#right ul li a:hover{
background: #F5F5F5;
}
@media screen and (min-width:489px){
#right ul{
display: block;
}
}
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
$(".btn").on("click",function(){
$('ul').toggle();
})
})
</script>
</head>
<body>
<div id="menu">
<div id="left">Hello</div>
<button>
</button>
<div id="right">
<ul>
<li><a href="">home</a></li>
<li><a href="">nav</a></li>
<li><a href="">head</a></li>
<li><a href="">footer</a></li>
<li><a href="">section</a></li>
<li><a href="">about</a></li>
</ul>
</div>
</div>
122222<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
1<br/>
</body>
</html>第一个问题 ： 我缩小浏览器窗口，点击按钮出现ul之后，再次点击隐藏ul。然后扩大浏览器，大屏幕下的导航条ul不见了。。。第二个问题 ： 在小窗口下，如何使点击按钮下拉的内容，悬浮在下面数字内容之上。我用了定位试了，感觉对于哪个层设置relative和absolute不是太清晰了。。。
添加回答
举报
0/150
提交
取消