css 浮动方式实现水平导航栏

ul.nav{
	float:left;
	list-style-type: none;
	margin:0;
	padding:0;
}

ul.nav li{
	float:left;
	margin-bottom: 1px;
	background-color: purple;
	color:white;
	line-height: 40px;
	margin-right: 1px;
	width: 140px;
	text-align: center;
}

ul.nav li:hover,
ul.nav li:active{
	background-color: #6DA203;
}

<ul class="nav">
			<li>菜单1</li>
			<li>菜单2</li>
			<li>菜单3</li>
			<li>菜单4</li>
			<li>菜单5</li>
			<li>菜单6</li>
		</ul>
	

效果图：