수평 서브 메뉴를 수직 드롭 다운으로 변경

Question

수평 서브 메뉴를 드롭 다운 스타일 메뉴로 변경하고 싶습니다. 여기 내 CSS는 :

#menubar ul{ 
    height:48px; 
    clear:both; 
} 
#menubar li{ 
    float:left; 
    display:inline; 
    height:48px; 
    margin-top:11px; 
    border-right: 1px solid #E7E7E7; 
} 
#menubar a{ 
    line-height:48px; 
    padding: 0 8px; 
    text-decoration:none; 
    font-size: 14px; 
    font-weight:800; 
    color:#4A4A4A; 
} 
#menubar a:hover{ 
    color:#000; 
} 
#menubar li:last-child{ 
    border-right: 0 none; 
} 
ul.children{ 
    display:none; 
    position:absolute; 
    margin-top:-10px; 
} 
#menubar li:hover > ul { 
    width:200px; 
    display:block; 
    height:auto; 
} 
ul.children li{ 
    width:200px; 
    position:static; 
    float:none; 
    display: block; 
    margin:-10px; 
    text-align:left; 
    background-color:#fff; 
    clear:both; 
    box-shadow:0px 4px 9px #a6d19c; 
    border:1px solid #a6d19c; 
    font-size:14px; 
    font-weight:700; 
    border-left:none; 
    border-right:none; 
    border-top:none; 
    margin-left:0; 
} 
#menubar ul.children a{ 
    float:none; 
    background-color:#fff; 
    white-space:nowrap; 
    font-size:12px; 
    font-weight:600; 
} 

나는 블럭과 인라인 디스플레이를 없애려고 노력했지만 아무 소용이 없다. CSS와 같은 요소에 CSS를 적용하는 데 익숙합니다. .children 클래스를 이해하지 못합니다.

이 드롭 다운 메뉴를 만들려면 도움이 필요합니다. :)

내 댓글에서 언급 한 바와 같이

Answer 1

, 당신의 CSS 작품, 당신은 단지 class="children" 예를 들어, 표시된 주요 LI들 중 하나의 자식 인 UL를 필요

<div id="menubar"> 
    <ul> 
     <li><a href="">Parent menu</a> 
      <ul class="children"> 
       <li><a href="">Child menu items</a></li> 
       <li><a href="">Child menu items 2</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>