css 导航栏

下拉需要注意ul里的溢出. 也可以用按钮来做下拉.

<!doctype html>
<html>
<head>
<style>
ul{
    list-style-type:none;
    margin-top:0;
    margin-left:20%;
    padding:0;
    overflow:visible;
    background-color:#f3f3f3;
    position:fixed;
    top:0;
    width:60%;
}
li{
    float:left;
}
li a{
    display:block;
    color:#666;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}
li a:hover:not(.active){
	 background-color:#ddd;
}
li a.active{
    color:white;
    background-color:#4caf50;
}
li a.red{
	color:white;
	background-color:red;
}
li.dropbtn {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>
<ul>
    <li><a class="active" href="#home">home</a></li>
    <li><a href="#new">new</a></li>
	<li class="dropdown">
		<a href="javascript:void(0)"
			class="dropbtn">更多</a>
		   <div class="dropdown-content">
		    <a href="#1">link 1</a>
		    <a href="#2">link 2</a>
		    <a class="red" href="#3">link 3</a>
	    </div>
	</li>
   <li style="float:right"><a href="#about">about</a></li>
</ul>
</body>
</html>