HTML横向导航栏

1. Horizontal navigator .html

<div id="nav">
  <ul>
    <li><a href="">选单 1</a></li>
    <li>
      <a href="">选单 2</a>
      <ul>
        <li><a href="">选单 2-1</a></li>
        <li><a href="">选单 2-2</a></li>
        <li><a href="">选单 2-3</a></li>
      </ul>
    </li>
    <li><a href="">选单 3</a></li>
    <li><a href="">选单 4</a></li>
  </ul>
</div>

2. Horizontal navigator.css

*{
	margin:0px;
	padding:0px;}
#nav{
	height:50px;
	width:800px;	
	background:#eee;
	margin:0 auto;/*0 上下 auto 左右*/
	margin-bottom:50px;
	}

#nav ul{
	/*box-shadow:0 0 10px rgba(0,0,0,.2); 向框添加一个或多个阴影*/
	list-style:none;/*在一个声明中设置所有的列表属性*/	
	/*white-space:nowrap 段落中的文本不进行换行*/
	}
	
#nav ul li {
  	float:left;
	width:200px;
	line-height:40px;
	text-align:center;
	position:relative;
}

#nav ul li a{
	text-decoration:none;
	color:#333;
	padding:5px 10px;
	display:block;
	}


 /* 在一级菜单中，鼠标放上去的样式 */
#nav ul li a:hover {
    color:#FFF;
    }
#nav ul li ul{
	position:absolute;/*防止一级菜单随二级菜单变化而变化*/
	left:0px;
	top:40px;
	display:none;
}
 /* 鼠标放在一级菜单上，显示二级菜单 */
#nav ul li ul li{
    float:none;
	text-align:center;
	margin-top:2px;
	background-color:#eee;
	}

#nav ul li ul li a{
	width:80px;
}
 /* 在二级菜单中，鼠标放上去的样式 */
 #nav ul li ul li a:hover {
        background-color:#eee;
 }
#nav ul li:hover ul{
		display:block;
}