4) 3단 드롭다운 메뉴

CSS를 이용해 3단 드롭다운 메뉴를 만들었다.

1 2 3 4 5 6 7 8 9 10 11 12 13

.menu_test {clear:both; position:relative; background:#5e5e5e; height:50px; line-height:50px; width:200px; margin:0 auto;} .menu_test .float_leftmenu {float:left; width:200px; height:50px; border-right:1px solid #CCC; font-size:20px; color:#fff; font-weight:bold;} .menu_test .float_leftmenu:hover {background:#5e5e5e; font-weight:bold; color:#fff;} .menu_test .float_leftmenu:hover .open_menu{display:block;} .menu_test .float_leftmenu .open_menu {clear:both; display:none; background:#5e5e5e; width:200px;} .menu_test .float_leftmenu .open_menu li {border-top:1px solid #fff;} .menu_test .float_leftmenu .open_menu li:hover {background:#414141; color:#FC0;}

2단 드롭다운 메뉴까지의 소스이다. 각 줄마다 속성을 가지며 hover는 마우스를 올렸을 때의 상태이다.

1 2 3 4 5 6 7 8

.menu_test .float_leftmenu .open_menu li:hover .open_menu2{display:block; color:#fff;} .menu_test .float_leftmenu .open_menu .open_menu2{clear:both; display:none; background:#414141; width:200px; position:absolute; left:100%; top:50;} .menu_test .float_leftmenu .open_menu .open_menu2 li {border-top:1px solid #fff;} .menu_test .float_leftmenu .open_menu .open_menu2 li:hover { background:#232323; color:#FC0;}

3단 드롭다운 메뉴들의 소스이다. 마찬가지로 각 줄마다 속성을 가진다.

코딩과정에서 좀 꼬여서 층마다 옆에 나올수 있도록 위치를 따로 조절했다. 그러다 보니 open_menu가 층 개수만큼 생기게 되었다.. 2번째 줄의 top속성값만 바꿔주면 된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<div class="menu_test"> <ul> <li class="float_leftmenu"> 검색 <div class="open_menu"> <ul> <li>1층 <div class="open_menu2"> <ul> <a href="링크"><li>1116</li></a> <a href="링크"><li>1120</li></a> <a href="링크"><li>1131</li></a> <a href="링크"><li>1132</li></a> <a href="링크"><li>1140</li></a> <a href="링크"><li>1167</li></a> <a href="링크"><li>1172</li></a> <a href="링크"><li>1174</li></a> </ul> </div> </li> </ul> </div> </li> </ul> </div>

CSS를 적용시킨 HTML소스. class만 주면 된다.

상당히 고생했던 부분인데 결과는 나름 잘 나왔다. class 중첩 말고 다른 방법으로 하면 open_menu부분을 여러 개 생성하지 않고 만들 수 있을 것 같다. 효율적인 면에선 조금 아쉽다.