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;
}