메뉴 및 하위 메뉴 위로 마우스 이동

일부 메뉴에는 오른쪽에 하위 메뉴가 표시되는 세로 메뉴가 있습니다. 첫 번째 메뉴와 하위 메뉴를 가리키면 세 번째 메뉴에 속하는 두 번째 하위 메뉴 집합이 표시됩니다. 아래메뉴 및 하위 메뉴 위로 마우스 이동

<body> 
<ul class="menu"> 
    <li><a href="#">Population and Socio-Economic Atlas</a> 
     <ul> 
      <li><a href="#" class="chapter1">Population</a> 
       <ul> 
        <li><a href="#" class="map11">Population Density</a></li> 
        <li><a href="#" class="map12">Population By Sex</a></li> 
        <li><a href="#" class="map13">Population By Age</a></li> 
       </ul> 
      </li> 
      <li><a href="#" class="chapter2">Education</a></li> 
      <li><a href="#" class="chapter3">Agriculture</a> 
       <ul> 
        <li><a href="#" class="map31">Agricultural Land</a></li> 
        <li><a href="#" class="map31">Agriculture Holding</a></li> 
        <li><a href="#" class="map31">Agriculture By Type</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Level1 Menu2</a></li> 
    <li><a href="#">CA Election 2070</a> 
     <ul> 
      <li><a href="#" class="election1">Districts</a></li> 
      <li><a href="#" class="election2">Constituencies</a></li> 
      <li><a href="#" class="election3">Result</a> 
       <ul> 
        <li><a href="#" class="election31">District Map</a></li> 
        <li><a href="#" class="election32">Constituencies Map</a></li> 
        <li><a href="#" class="election33">Election Result 2070</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">To Be Continued</a></li> 
</ul> 
</body>

내 CSS :

.menu, 
.menu ul, 
.menu li, 
.menu a { 
    margin: 5px; 
    padding: 0; 
} 
.menu { 
    height: 250px; 
    width: 300px; 
    background: #FFCC99; 
} 
.menu li { 
    width:100%; 
    height:25px; 
    text-align:left; 
    display: block; 
    padding: 0 0px; 
    margin: 3px 0px; 
    line-height: 25px; 
    border-bottom: 1px solid #393942; 
} 

.menu li a { 
    font-family: Helvetica, Arial, sans-serif; 
    font-weight: bold; 
    text-decoration: none; 
    font-size: 14px; 
} 
.menu li:hover > a { color: #FF0000; } 

/* second level menu */ 
.menu ul { 
    position: relative; 
    width: 200px; 
    top: -26px; 
    left: 295px; 
    opacity: 0; 
    background: #CCCCCC; 
} 
.menu li:hover > ul { opacity: 1; } 
.menu ul li { 
    height: 25px; 
    overflow: hidden; 
    padding: 0 0px; 
    width: 200px; 
    padding: 0 0px; 
    margin: 6px 0px; 
    border: none; 
    border-bottom: 1px solid #353539; 
} 
.menu li:hover > ul li { 
    height: 25px; 
    overflow: visible; 
    padding: 0 0px; 
} 

.menu ul li a { 
     font-family: Helvetica, Arial; 
    font-style: italic; 
    font-weight: normal; 
    font-size: 12px; 
} 
.menu ul li:last-child a { border: none; } 

/* third level menu */ 
.menu ul ul { 
    position: relative; 
    width: 200px; 
    top: -26px; 
    left: 195px; 
    opacity: 0; 
    background: #00FF00; 
} 
.menu ul ul:hover > ul { opacity: 1; } 
.menu ul ul li { 
    height: 25px; 
    overflow: hidden; 
    padding: 0 0px; 
    width: 200px; 
    padding: 0 0px; 
    margin: 6px 0px; 
    border: none; 
    border-bottom: 1px solid #0000FF; 
} 
.menu ul ul ul:hover > ul { 
    height: 25px; 
    overflow: visible; 
    padding: 0 0px; 
} 

.menu ul ul li a { 
    font-family: Helvetica, Arial; 
    font-style: italic; 
    font-size: 12px; 
} 
.menu ul li:last-child a { border: none; }

어떻게이 문제를 해결하기 위해?

출처

2013-12-11 Suresh Man Shrestha

jsbin.com에서 이러한 문제를 설명해주십시오. 사람들이 문제를 이해한다면 행복 할 것입니다. – sachinjain024

또는 JSFiddle - http://jsfiddle.net/ – ZenMaster

안녕하세요, 문제에 대해 자세히 설명해 주시겠습니까? jsfiddle에서 코드를 테스트하고 제대로 작동한다고 생각합니다. – Merlin

overflow: hidden/visible 대신 display: block/none;을 사용하여 하위 메뉴를 숨기거나 숨기기를 취소해야합니다.

Here's the fiddle

overflow은 요소의 시인성에 영향을 미친다. 요소는 여전히 DOM에 존재하며 그것에 관련된 모든 이벤트에 응답/트리거합니다. 그러므로 문제.

출처

2013-12-11 07:10:50

문제가 해결되었습니다. 인정했다. –

솔루션으로 문제를 해결하는 데 도움이 되었다면 답을 수락하십시오. 감사합니다 –

opacity을 사용하여 하위 메뉴를 숨기기 때문에 이러한 현상이 발생합니다. opacity이 0이면 하위 메뉴가 여전히 페이지에 있고 마우스 이벤트를 수신합니다. 서브 메뉴는 하위 요소에 추가되고 가시성 스택이 높아지며 도둑이 hover 인 이유가됩니다. opacity 대신 display을 사용하십시오. Fiddle : http://jsfiddle.net/mL3eD/

출처

2013-12-11 07:14:56 Krzysztof

당신의 제안은 제가 문제를 해결하는 데 도움이되었습니다. 인정 된 도움말. –

메뉴 및 하위 메뉴 위로 마우스 이동

답변

관련 문제