div에서 호버를 열고 div 내 콘텐츠를 선택할 수 없습니다.

Question

div 내 메뉴에서 작업 중이며 이미지와 텍스트 위에 마우스를 올리면이 메뉴가 열리지 만 그렇게 할 수는 없습니다. 내가 볼 수있는 가시성을 숨기고 그것의 작동하지 않지만 내가 그것을 표시 아무도 작동하지만 아무것도 선택하지 않았다. 나는 그것을 어떻게 성취 할 수 있는가.

이 사이트의 메뉴 같은 것을 원하는 :

여기

<ul class="sec-menu"> 
    <li><a class="account" href="#">EXPLORE</a> 
     <div id="my-account" class="for-current-sale-account" style="height:auto;"> 
     <div class="up-arrow4">&nbsp;</div> 
      <ul class="part-one"> 
      <li><a href="#" class="page1 all-click about-us">About Us</a></li> 
      <li><a href="#" class="page1 all-click about-us">Exclusive Indulgences</a></li> 
      <li><a href="#" class="page1 all-click about-us">Experiences</a></li> 
      <li><a href="#" class="page1 all-click about-us">Honeymoon </a></li> 
      <li><a href="#" class="page1 all-click about-us">Private Villas</a></li> 
      <li><a href="#" class="page1 all-click about-us">Testimonials</a></li> 
      <li><a href="#" class="page1 all-click about-us">Media & Downloads</a></li> 
      <li><a href="#" class="page1 all-click about-us">Newsletters</a></li> 
      <li><a href="#" class="page2 all-click contact-us">Contact Us</a></li> 
      <!-- <li><a href="javascript:void(0);" class="page3 all-click">Magazine</a></li> --> 
      </ul> 
      <script src="http://apis.google.com/js/plusone.js"></script> 
       <!--script for google+ sharing end--> 
      <ul class="social-networks"> 
        <li style="padding-left:10px;"><a target="_blank" href="https://www.facebook.com/Luxado"><img class="fb-hover" src="http://luxado.in/skin/frontend/default/hotel/images/facebook.png" /></a></li> 
        <li><a target="_blank" href="https://twitter.com/Luxadotravel"><img class="twi-hover" src="http://luxado.in/skin/frontend/default/hotel/images/twitter.png" /></a></li> 
        <li><a target="_blank" href="https://plus.google.com/103241305149258811392/posts"><img class="g-hover" src="http://luxado.in/skin/frontend/default/hotel/images/gplus.png" /></a></li> 
      </ul> 
     </div> 
    </li> 
</ul> 

내 JQuery와 있습니다 : 여기

ul.sec-menu{float: right;list-style: none outside none;margin-right: 36px;margin-top: 34px;width: auto;} 
*{margin: 0;padding: 0;}ul.sec-menu li:last-child{border-right: medium none;} 
ul.sec-menu li{float: right;font-family: 'Merriweather Sans',sans-serif;width: auto;} 
li{list-style: none outside none;} 
ul.sec-menu li a{color: #FFFFFF;float: left;font-family: 'Merriweather Sans',sans-serif;font-size: 14px;padding: 0 25px 20px 0;text-align: center;text-decoration: none; width: auto;} 
.account{background: url("http://projects.flashonmind.com/hoppworldwide/wp-content/uploads/2013/09/exploreIcon.png") no-repeat scroll 101% 1% rgba(0, 0, 0, 0);height: 18px;/*margin: 0 -11px 0 -10px !important;*/margin: 0 -50px 0 -10px !important;} 
.for-current-sale-account{/*background: url("http://projects.flashonmind.com/hoppworldwide/wp-content/uploads/2013/09/menuBg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);*/background-color:#000000;border-radius: 8px 8px 8px 8px;float: left;height: auto;margin-right: 25px;padding: 10px 13px;position: absolute;right: 0;/*top: 69px;*/top: 100px;visibility: hidden;width: 191px;z-index: 300;} 
.up-arrow4{background: url("http://projects.flashonmind.com/hoppworldwide/wp-content/uploads/2013/09/toolTip.png") no-repeat scroll 100% 0 rgba(0, 0, 0, 0);float: left;height: 18px;opacity: 0.55;position: absolute;/*top: -18px;*/top: -11px;width: 184px;}*{margin: 0;padding: 0;} 
.for-current-sale-account ul{float: left;list-style: none outside none;margin-bottom: 0;padding: 10px;width: 183px;} 
.for-current-sale-account ul li{border: medium none;color: #FFFFFF;float: left;line-height: 29px;list-style: none outside none;width: 92%;} 
ul.sec-menu li{/*float: right;*/font-family: 'Merriweather Sans',sans-serif;/*width: auto;*/} 
ul.sec-menu li:hover{visibility:visible;display:inline-block;} 
img_menu{border: medium none;} 

메뉴의 컨텐츠 내 사업부입니다 : 여기 http://www.luxado.in/index.php/customer/account/add/

내 CSS입니다 :

<script> 
$(document).ready(function(){ 
    $(".sec-menu").mouseover(function(e) { 
     $("#my-account").css("display","block"); 
    }); 
    $("#my-account").mouseout(function(e) { 
     $("#my-account").css("display","none"); 
    }); 

}); 

</script> 

Answer 1

당신은 디스플레이를 사용하지합니다 판매 계급. 다음을 참조하십시오.

또한

.for-current-sale-account { 
    /*background: url("http://projects.flashonmind.com/hoppworldwide/wp-content/uploads/2013/09/menuBg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);*/ 
    background-color:#000000; 
    border-radius: 8px 8px 8px 8px; 
    float: left; 
    height: auto; 
    margin-right: 25px; 
    padding: 10px 13px; 
    position: absolute; 
    right: 0; 
    /*top: 69px;*/ 
    top: 100px; 
    display: none; 
    width: 191px; 
    z-index: 300; 
} 

이 작업 jsfiddle을 확인 ...

Answer 2

다음과 같이하십시오 :

이

$(document).ready(function(){ 
    $(".sec-menu").mouseover(function(e) { 
     $("#my-account").css("display","block"); 
    }); 
    $(".sec-menu").mouseout(function(e) { 
     $("#my-account").css("display","none"); 
    }); 
}); 

는 CSS :

#my-account { 
    display: none; 
} 

예를 참조 jsFiddle에 : .FOR - 전류에 대한 가시성 대신 아무도 :
jsFiddle