드롭 다운 메뉴에서 마우스 오버시 마우스 오버시 탭으로 전환

드롭 다운 하위 메뉴를 롤오버하는 동안 어떻게 호버 모드로 전환 할 수 있습니까? 자바 스크립트가 필요합니까 아니면 CSS에서만 할 수 있습니까?드롭 다운 메뉴에서 마우스 오버시 마우스 오버시 탭으로 전환

<li id="anchor" class="title dropdown"><a href="#">Main Tab</a> 
       <div class="column">      
        <ul> 
         <li class="subtitle">Button 1</li> 
         <li class="subtitle">Button 2</li> 
         <li class="subtitle">Button 3</li> 
      </div>   
     </li>

출처

2010-05-12 Hwang

matpol이 제안 했으므로 CSS를 사용하여 수행하고 css hover fix을 사용하여 IE에서 정렬 할 수 있습니다.

사이드 노트에서 div가 필요 없으므로 스타일을 현명하게 수행하려면 중첩 된 li 요소의 스타일을 지정해야합니다. 두 번째 ul도 닫아야합니다. 어쨌든 빠르게 코드 스 니펫을 추측하겠습니다. 그러나 나는 그것을 가져올 것이라고 생각했습니다.

업데이트;

메가 드롭 다운은 얼마입니까? (필요한 경우 <li>에 넣을 수 있습니다.) 해당 레벨에서 div가 필요 없습니다.

이런 식으로 뭔가 ...

<li id="anchor" class="title dropdown"><a href="#">Main Tab</a> 
    <ul class="column"> 
    <li class="subtitle">Button 1</li> 
    <li class="subtitle">Button 2</li> 
    <li class="subtitle">Button 3</li> 
    </ul>   
</li> 

/* styles */ 


li#anchor:hover { 
    /* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */ 
} 

li#anchor ul.column { 
    display: none; 
    /* Styles for this ul, float, position etc */ 
} 

li#anchor:hover ul.column { 
    display: block; 
}

그것의 검증되지 않은,하지만 난 기억 신경 것보다 내가이 더 많은 일을했습니다 P

출처

2010-05-12 11:49:56 Tom

을 내가 실제로 메가 드롭 다운 메뉴를하고 있었다 =) 코드가 정확해야하지만 현재 나를 위해 작동하지 않습니다. 어쩌면 id/ul도 타겟팅해야합니까? – Hwang

나는 내 대답을 업데이트 했으므로 좀 더 도움을 주어야합니까? – Tom

CSS로 할 수 있지만 이전 크레이 피어 브라우저 (예 : 6)의 경우 JS가 필요합니다.

li .column{ 
    display: none; 
} 

li:hover .column{ 
    display: block 
}

IE6은 앵커 태그에서만 호버링을 지원하므로 JS가 필요합니다.

출처

2010-05-12 10:40:27 matpol

드롭 다운 메뉴에서 마우스 오버시 마우스 오버시 탭으로 전환

답변

관련 문제