CSS 사이드 바 멀티 레벨 메뉴

Question

너희들이 나를 올바른 방향으로 가르 칠 수 있니? this 템플릿에 사이드 바 다단계 기능을 추가하고 싶습니다. 그래서 주 메뉴의 항목 중 하나를 가리키면 오른쪽으로 약간의 하위 항목이 나옵니다 ... 선호하는 경우에만 CSS를 사용하고 스타일/색상/모양 등을 유지할 때 ... 저는 CSS에서 빠지기 때문에 도움을 받으십시오.

Answer 1

Eric Meyer의 pure CSS menu 예가 유용 할 수 있습니다. 링크 된 페이지로 이동하는 경우 'CSS/가장자리'위로 마우스를 가져 가면 메뉴가 표시됩니다.

Answer 2

이 같은 것을 수행해야합니다

<div class="menu"> 
     <ul> 
      <li class="list_item"> 
       <a href="#">Home</a> 
       <ul class="submenu"> 
        <li class="sub_list_item"><a href="#">Home</a></li> 
        <li class="sub_list_item"><a href="#">Home</a></li>      
        <li class="sub_list_item"><a href="#">Home</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 

이

3 개 하위 목록의 항목이 하나 개의 메뉴 항목에 대한 기본 구조가 될 것입니다. 나는이 코드를 테스트하지 않았지만, 여기서는 몇 가지 CSS 스타일링을 시작했다.

ul.submenu { 
    display:none; 
} 
ul.submenu:hover{ 
display:block; 
} 
ul.submenu li.sub_list_item { 
width:100px; 
background:blue; 
color:#fff; 
line-height:30px; 
height:30px 
} 

충분하게 시작해야합니다. 행운을 빕니다.

Answer 3

This is a good place to start. 다른 옵션이 많이 있습니다.