중첩 목록 및 호버 효과 관련 문제

Question

중첩 목록이 포함 된 메뉴에서 약간의 동작이 발생합니다.

상위 메뉴에는 광범위한 범주가 있습니다. 사용자가이 목록 항목 중 하나를 가리키면 하위 메뉴가 아래에 나타납니다. 이건 괜찮아.

그러나 하위 항목에는 하위 메뉴가있을 수도 있습니다 (나는 이들을 손자로 지칭합니다). 또한 호버에 표시되지만 사용자가 더 이상 손자를 가리 키지 않으면 전체 하위 메뉴가 사라집니다.

이

은 최고의 FIDDLE

• 가 세 아이를 표시 부모에 마우스를 가져 가면 설명한다. 이것은 좋다.
• 하위 1 위에 마우스를 올려 놓으면 손주가 표시됩니다. 이 또한 입니다.
• 하지만 이제는 자녀 1 이하의 손주가 펼쳐지면 자녀 2 또는 자녀 3을 클릭하려고 시도하는 것이 번거로워집니다. 이것은 매우 나쁨입니다.

여기 어떻게 바보 같은 행동없이 괜찮은 호버 효과를 얻을 수 있습니까? (A CSS 솔루션 바람직 할 것이다.)

HTML

<div id="centeredmenu"> 
    <ul> 
     <li> 
     <p><a href="#"><span>Parent</span></a></p> 
      <ul> 
       <li> 
        <a href="#">Child 1 </a> 
         <ul> 
         <li><a href="#">grandchild 1</a></li> 
         <li><a href="#">grandchild 2</a></li> 
         <li><a href="#">grandchild 3</a></li> 
         </ul> 
       </li> 
       <li><a href="#">Child 2</a></li> 
       <li><a href="#">Child 3</a></li> 
       </ul> 
      </li> 
    </ul> 

CSS

#centeredmenu ul { 
    clear:left; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    left:50%; 
    text-align:center; 
} 
#centeredmenu ul li { 
    display:block; 
    float:left; 
    list-style:none; 
    margin:0; 
    padding:0; 
    position:relative; 
    right:50%; 
} 
#centeredmenu ul li a { 
    display:block; 
    margin:0 0 0 0px; 
    padding:3px 10px; 
    background: rgb(240,240,240); 
    color:#333333; 
    text-decoration:none; 
    line-height:2.3em; 
    border-top: 4px solid transparent; 
    border-right: 1px solid transparent; 
    border-bottom: 3px solid transparent; 
    border-left: 1px solid #848484; 
} 

/*hides the sub menu*/ 
#centeredmenu ul li ul li{ 
    display: none; 
} 

/*displays sub menu on hover*/ 
#centeredmenu ul li:hover ul li { 
    display: block; 
    clear: both; 
    margin-left: 15px; 
} 

/*hides sub-sub menu*/ 
#centeredmenu ul li ul li ul{ 
    display: none; 
} 

/*displays sub-sub menu on hover*/ 
#centeredmenu ul li ul li:hover ul { 
    display: block; 
    clear: both; 
    margin-left: 15px; 
}​ 

Answer 1

중첩 목록의 마크 업 구조가 잘 보입니다.

중첩 된 UL의 절대 위치와 언급 한 Z- 인덱스 조정을 사용해야합니다.

이

이 CSS는 데모 관련 같습니다

http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html

Answer 2

문제는 그 때 자식 2, 자식 1 붕괴 위에 자식 1 중 당신이 마우스와 마우스 커서 아래에서 child2를 이동합니다. 손주들을 절대적으로 배치하여 자녀들에게 포함시키지 않도록해야합니다.