CSS的导航栏

垂直导航栏：

html中：

<ul>
   	<li><a href="#">主页</a></li>
   	<li><a href="#">新闻</a></li>
   	<li><a href="#">联系</a></li>
   	<li><a href="#">关于</a></li>
   </ul> 

CSS中：

*{
	margin: 0;
	padding:0;
}
ul{
	list-style: none;
	width: 200px;
	background-color: #f1f1f1;
}
li a{
	display: block;
	text-decoration: none;
	padding:8px 16px;
	color:  #000;

}

li a:hover {
    background-color: #555;
    color: white;
}

选中的垂直导航栏
html中：

<ul>
   	<li><a class="active"href="#">主页</a></li>
   	<li><a href="#">新闻</a></li>
   	<li><a href="#">联系</a></li>
   	<li><a href="#">关于</a></li>
   </ul>

CSS中：

*{
	margin: 0;
	padding:0;
}
ul{
	list-style: none;
	width: 200px;
	background-color: #f1f1f1;
}
li a{
	display: block;
	text-decoration: none;
	padding:8px 16px;
	color:  #000;

}
li a.active{
	background-color:#4CAF50;
	color: white;
}
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

水平导航栏
html中：

<ul>
   	<li><a href="#">主页</a></li>
   	<li><a href="#">新闻</a></li>
   	<li><a href="#">联系</a></li>
   	<li><a href="#">关于</a></li>
   </ul>

CSS中：

*{
	margin: 0;
	padding: 0;

}
ul{
	list-style: none;
	overflow: hidden;
	background-color: #333;
}
li {
	float: left;
}
li a{
	display: block;
	text-decoration: none;
	color: white;
    text-align: center;
    padding: 14px 16px;
}
li a:hover {
    background-color: green;
}

选中的水平导航栏
html中：

<ul>
   	<li><a class = "active" href="#">主页</a></li>
   	<li><a href="#">新闻</a></li>
   	<li><a href="#">联系</a></li>
   	<li><a href="#">关于</a></li>
   </ul>

CSS中：

*{
	margin:0;
	padding:0;

}
ul{
	list-style: none;
	background-color: #333;
	overflow: hidden;
}
li{
	float: left;
}
li a{
	display: block;
	text-decoration: none;
	color: white;
	padding:14px 16px;
	text-align:center;
}
li a.active{
	background-color: green;
}
li a:hover:not(.active){
	background-color: blue;
}