小白十分钟-推荐导航栏

大腿绕道，给小白学习用，上代码

<div class="list">
		<div class="infor">
			<ul class="left">
				<li><a href="">限时特价</a></li>
				<li><a href="">热门推荐</a></li>
			</ul>
			<ul class="right">
				<li><a href="" class="selected">推荐</a></li>
				<li><a href="">折扣</a></li>
				<li><a href="">价格</a></li>
			</ul>
		</div>
	</div>

css样式 

* {
		padding: 0;
		margin: 0;
	}
	a {
		text-decoration: none;
	}
	.list {
		width: 910px;
		float: left;
		margin-left: 10px;
		margin-top: 10px;
	}
	.infor {
		height: 45px;
		line-height: 45px;
		background-color: #eee;
	}
	.left {
		display: inline-block;
		float: left;
	}
	.left li {
		display: inline-block;
		width: 150px;
		height: 43px;
		line-height: 43px;
		text-align: center;
	}
	.left li:first-child,.left li:hover {
		background-color: #fff;
		border-top: 2px solid #458b00;
		position: relative;
		left: 1px;
	}
	.left a {
		color: #666;
	}
	.right {
		display: inline-block;
		padding: 0 20px 0 0;
		float: right;
	}
	.right li {
		display: inline-block;
		width: 60px;
		height: 45px;
		line-height: 45px;
		text-align: center;
	}
	.right li a {
		padding: 3px 8px;
		color: #666;
	}
	.right li a.selected,.right li a:hover {
		background-color: #458b00;
		color: #fff;
	}

妥了，十分钟搞定，下班咯