IE7에서 작동하는 세로로 중첩 된 CSS 메뉴 구성

Question

CSS (및 JS를 적용 : 호버 스타일) 만 사용하면 수평 드롭 다운 중첩 메뉴를 만드는 가장 좋은 방법은 무엇입니까?

나는 here 메뉴를 채택하려고하는데, 원하는 위치에 도달 할 수 없다. 내가 이것을 시도 할 때마다, 나는 더 이상 다루기 힘든 CSS cludge로 끝을 맺는다.

DOM :

<nav> 
    <ul> 
    <li> 
     <a href="#">Heading 1</a> 
     <ul> 
     <li><a href="#">1</a> 
       <ul><li>a</li><li>b</li></ul> 
     </li> 
     <li>2</li><li>3</li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Heading 2</a> 
     <ul><li>1</li><li>2</li><li>3</li></ul> 
    </li> 
</nav> 

원하는 출력 :

이다

, 상부 헤더는 헤더의 왼쪽 가로 각 헤더 라인 아래의 최초 메뉴 완전히 수평 , 그리고 그 이상의 모든 부 메뉴들은 오른쪽에서 수평으로 위로 정렬하고 상단에서 수직으로 정렬됩니다. 이 기본 아이디어를 구축하려면 어떻게해야합니까?

Answer 1

나 자신을 만들 수 있었지만 충분히 좋을지 확신 할 수 없습니다. 오히려 당신이 jQuery UI Development & Planning Wiki > Menu 페이지를 보라고 제안하고 싶습니다. 이 페이지는 몇 가지 메뉴를 나열합니다.

또한 this is a very simple script 시작 지점으로 사용할 수있는 드롭 다운 메뉴를 만듭니다.

편집

동적 CSS 팝업 메뉴를 만들려면, 당신은 (i) 귀하가 (II) 불가능하다 "가져가"이벤트를 활용하여 동적으로 하위 메뉴의 위치를 ​​가지고 주로하기 때문에, jQuery를 지원해야합니다 CSS만으로 해결할 수 있습니다.

1. 메인 메뉴 <ul>는
2. 하위 메뉴가 포함 된 <li>의 모든 position: static이 position: relative
3. 귀하의 하위 메뉴 <ul>의 모든 position: absolute 및 display: none해야해야해야한다.

그런 다음 hover 이벤트를 하위 메뉴가 포함 된 <li> 요소에 모두 구현할 수 있습니다. 마우스를 올리면 먼저 <li> 내에 직접 중첩 된 <ul>을 배치 한 다음 표시합니다. 또한 hover 이벤트는 해당 요소가 "해제 된"상태 일 때 발생하는 이벤트를 제공합니다. 이 경우 해당하는 <ul>을 숨기 만하면됩니다. 쉬운?

단지 포함 <li>의 폭을 잡아, 하위 메뉴 인 <ul>를 놓고에 left: XXXpx; top: 0을 설정하려면 <ul> 당신이 표시하려고합니다. 하위 메뉴가 <li> 아래에 표시되면 <li> 높이를 잡고 <ul>에 left: 0; top: YYYpx을 설정합니다. 절대 - 상대적인 조합은 그러한 종류의 위치 지정을 가능하게합니다.

"가장자리 감지"를 구현하는 것도 고려해 볼 수 있습니다. 메뉴가보기 포트의 오른쪽 또는 아래쪽 가장자리를지나 확장되는지 확인하는 것입니다. 꽤 까다 롭습니다.

HTML 사양에 따르면 메뉴가 정상이지만 IE7에서는 메뉴를 렌더링하는 데 문제가 있으며 (마우스 오버 이벤트가 발생 함) 유의하십시오. 이를 극복하기 위해 하위 메뉴에 z- 색인을 설정할 수 있습니다.