[HTML/CSS] dropdown menu

다음과 같은 드랍다운메뉴 만들기

---

 

*{margin : 0; padding : 0;} /* 맨 왼쪽위로 정렬 */

#a1{margin-left: 10px; margin-top: 10px;} /* 간격주기 */

 

 

 

list-style:none; /* 리스트 구분값 삭제 */

 

 

 

float: left; /* 왼쪽으로 나란히 정렬 */

 

 

 

li:nth-child(1) {border-left: 1px solid gray;} /* 특정순서를 조건에 맞게 변경 */

 

 

 

ul{overflow:hidden;} /* ul의 자식태그인 li가 10행에서 float속성을 가지므로 부모태그는 overflow:hidden을 가짐 */

해당내용 참고

[HTML/CSS] float

 

a{display:block; padding:2px 10px;

text-decoration: none;} /* a태그의 메뉴부분들 padding 주기위해 디스플레이 블락으로 수정(인라인상태로는 불가) */

 

 

 

a:hover {background: #999; color:#fff;} /* a태그(메뉴부분) 마우스 올렸을때 색상변경 */

.depth_1 {margin-left:10px;} /* 왼쪽간격 */

 

 

 

#menu > li:hover .depth_1{display:block;} /* 메뉴의 직계자식인 HTML에 마우스를 올릴때 블락으로(옆으로 이어서) 나타내줘야함*/

#menu > li:hover .depth_1{display:block;} 가 없다면?

HTML 하위메뉴가 아예 나오지 않음 

position : absolute; /* 부모요소의 상대적 위치로 지정 */

position : absolute; 가 없다면?

이렇게 나와야하는 요소가

 

이렇게 나옴 

부모요소인 HTML의  상대적 위치로 변경해야하므로 position : absolute; 사용해야함!

left : 0;  /* 정렬 */

right: 0; /* 정렬 */

text-align: center;