先看效果 ：
来不及看？ 直接下载代码
页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<link rel="stylesheet" href="/go.html?url=css/menu.css" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/menu.js"></script>
</head>
<body>
<div class=nav>
<div class="menu" style="position:absolute">
<div class="mz">
<ul>
<a href="/go.html?url=#"><li>手机1</li></a>
<a href="/go.html?url=#"><li>手机2</li></a>
<a href="/go.html?url=#"><li>手机3</li></a>
<a href="/go.html?url=#"><li>手机4</li></a>
<a href="/go.html?url=#"><li>手机5</li></a>
<a href="/go.html?url=#"><li>手机6</li></a>
<a href="/go.html?url=#"><li>手机7</li></a>
<a href="/go.html?url=#"><li>手机8</li></a>
<a href="/go.html?url=#"><li>手机9</li></a>
<a href="/go.html?url=#"><li>手机10</li></a>
<a href="/go.html?url=#"><li>手机11</li></a>
</ul>
</div>
<div class="kd">全部频道</div>
<div class="my"><span class="mu"></span>
</div>
</div>
<div class="menu2">
<ul>
<a href="/go.html?url=#"><li>手机1</li></a>
<a href="/go.html?url=#"><li>手机1</li></a>
<a href="/go.html?url=#"><li>手机1</li></a>
<a href="/go.html?url=#"><li>手机1</li></a>
<a href="/go.html?url=#"><li>手机1</li></a>
<a href="/go.html?url=#"><li>手机1</li></a>
<a href="/go.html?url=#"><li>手机1</li></a>
</ul>
</div>
</div>
<style type="text/css">
.nav{
position: fixed;
top: 0px;
}
.menu2{
padding-top: 1rem;
background: rgb(204, 204, 204);
}
.slide-box{
margin-top: 200px;
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
.slide-item{
width: 200px;
height: 200px;
border:1px solid #ccc;
margin-right: 30px;
}
</style>
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
<div class="slide-box">
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
<div class="slide-item"></div>
</div>
</body>
</html>
<!DOCTYP
