水平第二層選單的CSS排版

by ShadowKao

HTML

<body>
 
    <ul class="outerUl">
		<li>
		   <a href="#">AAA</a>
		</li>
		<li>
	     	<a href="#">AAA</a>
		</li>
		<li>
	    	<a href="#">AAA</a>
				<ul class="innerUl">
				 <li>
				     <a href="#">BBB1</a>
				 </li>
				 <li>
				     <a href="#">BBB2</a>
				 </li>
				 <li>
				     <a href="#">BBB3</a>
				 </li>
				 <li>
				     <a href="#">BBB4</a>
				 </li>
				</ul>
		</li>
		<li>
             <a href="#">AAA</a>
		</li>
		<li>
		      <a href="#" class="last_a">AAA</a>
		</li>
 </ul>
		 
	</body>

CSS

body{ 
  
	 padding:0;
	 margin:0; 
   /*body負責讓選單水平垂直置中*/
	 height:100vh;
	 display:flex;
	 justify-content:center;
	 align-items:center; 
}
 
ul
{
   /*ul預設會有些微的margin、padding*/
	margin:0;
	padding:0;
	list-style:none;  
	
}
ul.outerUl > li{  
/*讓第一層選單變成水平的關鍵*/
  float:left; 
}
ul.outerUl > li > a,
ul.innerUl > li > a{ 
	/*a元素預設display:inline;不支援width、height*/
	display:inline-block;
	text-decoration:none;
	width:100px;
	height:50px;
	line-height:50px;/*文字垂直置中*/
	text-align:center;/*文字水平置中*/ 
	border:1px solid #d2d2d2; 
	color: #434eae;/*前景色深藍色*/
	background: #fff;/*背景色白色*/
}
/*外層選單*/
ul.outerUl > li > a{
	border-right-width:0px;
	
}
/*內層選單*/
ul.innerUl > li > a{ 
	 border-top-width:0px;
}
ul.outerUl> li > a.last_a{
	 
	border-right-width:1px;
}
ul.outerUl > li > a:hover,
ul.innerUl > li > a:hover{
	/*當滑鼠hover時的變化*/
	color: #fff;/*前景色白色*/
	background: #434eae;/*背景色藍色*/
}
  

ul.outerUl > li {
	position:relative;
	
}
ul.innerUl{
	display:none;/*第二層選單容器預設隱藏*/
	position:absolute;  
	z-index:10;
}
ul.outerUl > li a:hover ~ ul.innerUl ,
ul.innerUl:hover
{
	 display: block;/*當滑鼠hover時，第二層選單容器才顯示*/
}