드롭 다운 메뉴 CSS가 작동하지 않음, 내부 div 표시되지 않음

Question

Choose Location 위로 마우스를 이동하면 div adv_cities이 표시되고 adv_cities 메뉴를 탐색 할 수 있습니다. 내가 시도한 것은 작동하지 않는다.

<div class="header_top_location"> <ul id="city_nav" class="city_nav menu"> 
      <li class="mega"><a href="#">Choose Location</a> 
       <div class="adv_cities" id="adv_cities" style="display:none"> 
       <ul><li>London</li> 
         <li>Bristol</li> 
         <li>Manchester</li> 
         <li>Kent</li> 

      </ul> 
       </div> 
      </li> 
     </ul> 

     </div> 

CSS의 난이 문제를 해결하려면 어떻게

.header_top_location .mega > a:hover + .adv_cities, .header_top_location .adv_cities:hover .adv_cities{ 
    display:block !important; 
} 
.header_top_location .adv_cities { 
    background-color:#fff 
} 
.header_top_location .adv_cities ul{ 
    overflow:hidden; 
} 
.header_top_location .adv_cities li{ 
    float:left;padding:10px; 
} 

?

city_nav 코드는 플러그인에서 가져온 것으로 여러 페이지에서 사용하기 때문에 여러 곳에서 사용하고 있으므로 코드를 변경하고 싶지는 않습니다.

Answer 1

드롭 다운 메뉴에서 원하는 항목을 마우스로 가리키면 하위 메뉴가 표시됩니다. 그런 다음 내부 div와 내용이 필요하지 않습니다. 여기에 사용할 코드 스 니펫이 있습니다.

내가 CSS에서 만든 변경 내용 만에게.

.mega:hover > .adv_cities { 
 
    display: block !important; 
 
} 
 
.header_top_location .adv_cities { 
 
    background-color: #fff 
 
} 
 
.header_top_location .adv_cities ul { 
 
    overflow: hidden; 
 
} 
 
.header_top_location .adv_cities li { 
 
    float: left; 
 
    padding: 10px; 
 
}

<div class="header_top_location"> 
 
    <ul id="city_nav" class="city_nav menu"> 
 
    <li class="mega"><a href="#">Choose Location</a> 
 
     <div class="adv_cities" id="adv_cities" style="display:none"> 
 
     <ul> 
 
      <li>London</li> 
 
      <li>Bristol</li> 
 
      <li>Manchester</li> 
 
      <li>Kent</li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul> 
 

 
</div>

은 ... 1 3 선에 있고 난이 도움이 IMO가 필요하지 않은 추가 DIV ..

희망을 제거