Question

这是我的CSS，我的子菜单从左侧显示我希望子菜单应该上下滑动

   .outer
{
    width: 100%;
    text-align: center;
    background-color: Gray;
    padding-top: 20px;
    border-radius: 30px;
}
.g_logo
{
    width: 20%;
    color: White;
    float: left;
    padding-left: 5%;
    font-family:st @Gulim;
    padding-bottom: 10px;
}
.g_home
{
    width: 15%;
    color: Black;
    float: left;
    padding-left: 1%;
    font-family:@Gulim;
}
.g_services
{
    width: 15%;
    color: Black;
    float: left;
    padding-left: 1%;
    font-family: @Gulim;
}
.g_achvmnt
{
    width: 14%;
    color: Black;
    float: left;
    padding-left: 1%;
    font-family: @Gulim;
}
.g_cnct
{
    width: 15%;
    color: Black;
    float: left;
    padding-left: 1%;
    font-family: @Gulim;
}
.clear
{
    clear: both;
}

.g_home_items
{
    margin-left: 28%;
    background-color: Purple;
    float: left;
    width: 15%;
}
.g_services_items
{
    margin-left: 42%;
    background-color: silver;
    float: left;
    width: 15%;
      border-radius:5px;
}
.g_achvmnt_items
{
    margin-left: 57%;
    background-color: Purple;
    float: left;
    width: 15%;
}
.g_cnct_items
{
    margin-left: 72%;
    background-color: AppWorkspace;
    float: left;
    width: 15%;
}

这是我的Jquery

当我将鼠标悬停在菜单上时，我无法检索子菜单，请帮助我访问子菜单。子菜单出现但我无法访问该子菜单

                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
                    </script>
                    <script>
                        $(document).ready(function () {
                            $(".g_services_items").hide();
                            $(".g_services").hover(function () {            
                                $(".g_services_items").toggle("slow");
                            });


                        });
                    </script>






 **HTML FILE this is my HTML coed plzzz help me for this**




                    <body>
                        <form id="form1" runat="server">
                        <div class="outer">
                            <div class="g_logo">
                                LOGO
                            </div>
                            <div class="g_home">
                                HOME
                            </div>
                            <div class="g_services">
                                SERVICES
                            </div>
                            <div class="g_achvmnt">
                                ACHIEVMENTS
                            </div>
                            <div class="g_cnct">
                                CONTACT US
                            </div>
                            <div class="clear">
                            </div>
                        </div>

                         <div class="g_services_items">
                            <li class="mega first haschild">
                                <ul class="megamenu level1">
                                    <li class="mega first"><span class="menu-title">T-shirts</span></li>
                                    <li class="mega"><span class="menu-title">Sport shoes</span></li>
                                </ul>
                            </li>
                        </div>

                        </form>
                    </body>

Answer 1

你没有发布你的CSS，所以我不知道你的子菜单出现在哪里以及如何出现，但这个问题很常见。

将鼠标悬停在＆＃39;服务＆＃39;和子菜单出现，但当您尝试单击子菜单上的任何内容时它会消失。

基本上你可以通过以下方式让你的子菜单停留：

  $(document).ready(function () {
       $(".g_services_items").hide();
       $(".g_services, .g_services_items").on("mouseover",function () {
           $(".g_services_items").stop().show("slow");
       });
        $(".g_services, .g_services_items").on("mouseleave",function () {
           $(".g_services_items").stop().hide("slow");
       });
   });

您可以查看其工作原理Here

说明：

你没有切换子菜单，你显示（）并隐藏（）它。
当鼠标悬停在＆＃39;服务上时，您会显示菜单。或者在子菜单上，
当鼠标未停止时，您隐藏子菜单＆＃39; services＆＃39;或子菜单。
这里的.stop（）函数意味着避免不当行为，因为show（）和hide（）动画必须在另一个动画开始之前完成，所以你必须在行动中将它们停在中间。

编辑：

您的菜单显示在左侧，因为您已设置

.g_services_items
{
    margin-left: 42%;
    float: left;
}

删除这两个属性并将左下方的子菜单设置为：左侧：＆＃39; services＆＃39;使用jQuery：

查看新示例Here

Answer 2

这是你可以尝试使用隐藏和显示，鼠标悬停和离开

    $(".g_services_items").hide();
     $(".g_services").hover(function (e) {            
     $(".g_services_items").show("slow");
                        })
    $(".g_services_items").hover(function () {            
                            $(this).show("slow");
                         }).mouseleave(function(){
                         $(this).hide();
                         })
       });

这里是直播：LIVE EXAMPLE

我有一个菜单和子菜单，但我无法访问子菜单，但我想访问相应菜单的子菜单

2 个答案: