1.html和body的高度设置100%，为当前屏幕的高度，container高度也设置为100%，这样就继承了当前屏幕的高度.
2.上下两个导航栏固定定位,脱离了文档流,需要占位处理
3.将container设置为flex布局，换轴，因为上下两端有了占位，直接将main高度设置为100%
4.main设置overflow：auto超出部分显示滚动条。
这个用jQuery就的toggle函数可以实现。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="
>
<style>
.main
{
list-style: none
float: left
margin-left: 20px
}
.main li
{
list-style: none
text-align: left
margin-left: -40px
}
.main ul
{
display: none
}
.main a
{
text-decoration: none
}
.main li a
{
text-decoration: none
}
</style>
</head>
<body>
<ul id="uid">
<li class="main"><a href="#">菜单一</a>
<ul>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单二</a>
<ul>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
</li>
<li class="main"><a href="#">菜单三</a>
<ul>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
<li><a href="#">子菜单</a></li>
</ul>
</li>
</ul>
</body>
<script >
$(document).ready(
function () {
$(".main").hover(function () {
$(this).children("ul").toggle()
})
}
)
</script>
</html>
不知道你做过轮播没有，一样的道理，这个还更简单，事件触发，改变整体的left值，当然手机上的事件和pc是不一样的。<div class="wrap" style="这个宽度固定，可以是百分比，设置超出隐藏">
<ul style="这个宽度设置足够长，移动就是这个元素的left值">
<li>黄色</li>
<li>绿色</li>
<li>黄色</li>
</ul>
</div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）