많은 드롭다운 메뉴에 대한 예제가 보이지만, 그중에서 가장 간단해보이고 활용하기 쉬운 예제를 찾아 간단히 연습해보고 방법론을 올린다. 아마 숙지하는 것보다는 활용하는게 더 빠를 것 같다는 생각.
먼저 메뉴의 구조는 다음과 같이 HTML로 만들어진다.
<ul class="topnav"> <li><a href="#">홈</a></li> <li> <a href="#">메뉴1</a> <ul class="subnav"> <li><a href="#">서브메뉴</a></li> <li><a href="#">서브메뉴</a></li> </ul> </li> <li> <a href="#">메뉴2</a> <ul class="subnav"> <li><a href="#">서브메뉴</a></li> <li><a href="#">서브메뉴</a></li> </ul> </li> <li><a href="#">메뉴2</a></li> <li><a href="#">메뉴3</a></li> <li><a href="#">메뉴4</a></li> <li><a href="#">메뉴5</a></li> </ul>
상위 메뉴가 있고 그 드롭다운으로 하위 메뉴들이 나열되는 방식으로 표현된다.