0

我正在处理 div 内的菜单，该菜单在悬停在图像和文本上时打开，但无法这样做。我已经写了隐藏的可见性并且它不起作用但是当我给它时它没有显示它的工作但没有选择任何东西。我怎样才能实现它。

我想要这个网站的菜单： http ://www.luxado.in/index.php/customer/account/add/

这是我的CSS：

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;}

这是我的 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：

<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>
4

2 回答 2

1

试试这样：

$(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 上的示例：
jsFiddle

于 2013-10-01T06:46:06.397 回答
1

您需要使用 display: none 代替 .for-current-sale-account 类中的可见性。见下文。

.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... jsfiddle

于 2013-10-01T06:47:46.177 回答