html 과 css의 관계 기본 8편 / 풀다운 메뉴와 position 1 (ul, li 와 :hover)

중첩 리스트란 무엇을 의미할까?

 

li*4>a[herf] 이렇게 입력하고 탭을 누르면

다음과 같이 자동으로 입력이 된다.

 

li*4>a 역시도 위와 같은 역활을 한다.

 

 

<ul>
	<li><a href="http://www.naver.com/" targer="_blank">네이버</a></li>
	<li><a href="http://www.daum.com/" targer="_blank">다음</a></li>
	<li><a href="http://www.yahoo.com/" targer="_blank">야후</a></li>
	<li><a href="http://www.investing.com/" targer="_blank">인베스팅 닷컴</a></li>
</ul>

ul > li:nth-child(2){
	color:red;
}

ul > li:nth-child(1) > a{
	color:gold;
}

 

<ul>
	<li><a href="#">동물</a></li>
		<ul>
			<li><a href="#">포유류</a></li>
			<li><a href="#">조류</a></li>
		</ul>
	
	
	<li><a href="#">식물</a></li>
		<ul>
			<li><a href="#">나무</a></li>
			<li><a href="#">꽃</a></li>
		</ul>
	
</ul>

ul ul{
	display:none;
}

/* hover는 마우스가 올려지면 이라는 의미 */
/* 활성화 된 서브 메뉴 */
ul li:hover > ul{
	background-color:gold;
}

링크에 손을 올리면 다음과 같이 백그라운드 가 활성화 된다.