移动端左右滑动的导航的css实现方法

<div id="nav">	
			<ul class="list">
				<li class="item">菜单1</li>
				<li class="item">菜单2</li>
				<li class="item">菜单3</li>
				<li class="item">菜单4</li>
				<li class="item">菜单5</li>
				<li class="item">菜单6</li>
				<li class="item">菜单7</li>
				<li class="item">菜单8</li>
 
			</ul>
		</div>

body {
				width: 100;
				overflow-x: hidden;
			}
			
			li {
				list-style: none;
			}
			
			#nav {
				width: 100;
				height: 80px;
				overflow-x: scroll;
				position: relative;
			}
			#nav:before{
				content: \\;
				position: absolute;
				display: block;
				width: 100;
				height: 10px;
				background: #fff;
				left: 0;
				bottom: 0;
				z-index: 20;
			}
			.list {
				width: 500;
				box-sizing: border-box;
				
			}
			
			.item {
				float: left;
				width: 150px;
				height: 50px;
				font-size: 30px;
				line-height: 50px;
				margin-right: 30px;
				text-align: center;
			}

打赏

感谢支持与鼓励～