it 수업 3주차 (36) Menu 만들기

 

- 가로버전

 

<01선택 .menu>li:hover 시 해당 .submenu만 표시>

.wrapper>header>nav>.menu>li:hover .submenu{

           display: block;

}

 

 

 

 

 

<실행화면>

 

-가로버전

 

처음 실행 시키면 이 화면이 나오지만 메뉴박스 위에 커서를 가져다 되면 밑에 화면처럼 나온다.

 

 

 

또 다른 버전

위의 코드와 거의 흡사하다.

 

- 세로 버전

 

<02선택 .menu:hover 시 전체 .submenu 표시>

.wrapper>header>nav>.menu:hover .submenu{

          display: block;

}

 

 

 

 

<실행화면>

 

- 세로화면