1차메뉴/2차메뉴/3차메뉴/서브메뉴 구분

*1차메뉴/2차메뉴/3차메뉴/서브메뉴 구분

// 메뉴 박스
<nav class="menu-box-1">
	// 1차 메뉴 
	<ul>
		// 1차 메뉴 아이템
		<li>
			// 1차 메뉴 아이템 텍스트
			<a href="#">동물</a>
			// 2차 메뉴
			<ul>
				// 2차 메뉴 아이템
				<li>
					// 2차 메뉴 아이템 텍스트
					<a href="#">포유류</a>
					// 3차 메뉴
					<ul>
						// 3차 메뉴 아이템
						<li>
							// 3차 메뉴 아이템 텍스트
							<a href="#">사자</a>
						</li>
						<li>
							<a href="#">호랑이</a>
						</li>
					</ul>
				</li>
				<li><a href="#">조류</a></li>
			</ul>
		</li>
		<li>
			<a href="#">식물</a>
			<ul>
				<li><a href="#">과일</a></li>
				<li><a href="#">야체</a></li>
			</ul>
		</li>
	</ul>
</nav>

1. 1차 메뉴

- .menu-box-1 > ul  : 1차 메뉴를 선택하겠다는 것.

- .menu-box-1 > ul > li : 1차 메뉴 아이템.

- .menu-box-1 > ul > li > a : 1차 메뉴 아이템 텍스트.

 

2. 2차 메뉴

- .menu-box-1 > ul > li > ul : 2차 메뉴

- .menu-box-1 > ul > li > ul > li : 2차 메뉴 아이템

- .menu-box-1 > ul > li > ul > li > a : 2차 메뉴 아이템 텍스트

3. 3차 메뉴

- .menu-box-1 > ul > li > ul > li > ul : 3차 메뉴

- .menu-box-1 > ul > li > ul > li > ul > li : 3차 메뉴 아이템

- .menu-box-1 > ul > li > ul > li > ul > li > a : 3차 메뉴 아이템 텍스트

 

- .menu-box-1 > ul ul : 1차 메뉴 안에 있는 메뉴 들을 모두 선택(서브 메뉴)

( 서브메뉴 : 특정 메뉴에 마우스 올릴 시 부가적으로 나오는 메뉴 같은 것 )