Jquery http://www.inc.com/ 下拉菜单效果_Jquery_Html_Css

Jquery http://www.inc.com/ 下拉菜单效果

jquery html css

Jquery http://www.inc.com/ 下拉菜单效果,jquery,html,css,Jquery,Html,Css,我想实现下拉和隐藏菜单的效果这是我现在的小提琴当前，当您将鼠标悬停在菜单1上时，会出现项目淡出，但不会一直显示感谢您帮助解开这个谜团：D由于您的子菜单不是顶部菜单的子菜单，因此每次将鼠标移出菜单时都会调用“mouseout”事件我修复了您的HTML、Javascript和CSS，并清理了一些代码以提供示例 CSS: 希望这有帮助为什么是负面评价？只是给我一个改进的提示，而不是一个完整的代码。请在你的问题中用实际的词语来指定你想要达到的效果，而不是指向inc.com的链接，不管它是什么。

我想实现下拉和隐藏菜单的效果

这是我现在的小提琴

当前，当您将鼠标悬停在菜单1上时，会出现项目淡出，但不会一直显示

感谢您帮助解开这个谜团：D

由于您的子菜单不是顶部菜单的子菜单，因此每次将鼠标移出菜单时都会调用“mouseout”事件

我修复了您的HTML、Javascript和CSS，并清理了一些代码以提供示例

CSS:

希望这有帮助

为什么是负面评价？只是给我一个改进的提示，而不是一个完整的代码。请在你的问题中用实际的词语来指定你想要达到的效果，而不是指向inc.com的链接，不管它是什么。另外，请详细说明哪些内容不适用于您当前的代码。拖放显示/隐藏菜单效果代码不适用，因为我需要帮助才能实现该效果。当您将鼠标悬停在菜单上时，它会下拉并显示内容，我需要它保持不立即隐藏。删除代码的鼠标部分将使该区域保持可见，但什么决定了它何时再次隐藏？@Ivan是的，这是一个问题。。。我问这个问题的原因是因为我，我相信其他人，需要澄清一下你想要实现的目标。问问题可以帮助我们更好地确定如何帮助你，当然，除非你不回答。这是一种方式谢谢你，亚尼！嗨，亚尼，当我尝试对齐中心或边距时，如何将其对齐到屏幕效果的中心，自动效果子菜单错位

    $("#1").mouseover(function(){  
    //alert("aaaaaaaaaa"); just for testing
    $(".block2").stop().fadeToggle(700);
     });
 $("#1").mouseout(function(){      
    $(".block2").stop().fadeToggle(700);
     });

$(".menu2").mouseover(function(){  
    //alert("aaaaaaaaaa"); 
    $(".con2").stop().fadeToggle(700);
     });
$(".menu2").mouseout(function(){      
    $(".con2").stop().fadeToggle(700);
     });

<body>
<div class="block">
    <div class="box" id="1">
        menu1
        <div class="submenu" id="1">
            <div class="box2">item1_1</div>
            <div class="box2">item1_2</div>
            <div class="box2">item1_3</div>
            <div class="box2">item1_4</div>
            <div class="box2">item1_5</div>
         </div> 
    </div>
    <div class="box " id="2">
        menu2
        <div class="submenu" id="2">
            <div class="box2">item2_1</div>
            <div class="box2">item2_2</div>
            <div class="box2">item2_3</div>
            <div class="box2">item2_4</div>
            <div class="box2">item2_5</div>
         </div> 
    </div>
    <div class="box" id="3">
        menu3
    </div>
    <div class="box" id="4">
        menu4
    </div>
    <div class="box" id="5">
        menu5
    </div>

 </div>

$('.submenu').hide();


$(".box").hover(function(){  
    $(this).find(".submenu").stop().fadeToggle(700);
});

.block{
    width: 615px;
    border: solid 1px #aaa;  
    text-align: center;  
    white-space: nowrap;  
    overflow: hidden;
}
.box{
    width: 100px;  
    height: 50px;  
    border: solid 1px #ccc;  
    display: inline-block;  
    vertical-align: middle;         
}   
.submenu{
    width: 615px;
    height:300px; 
    position:absolute;left:8px;top:60px;
    border: solid 1px #aaa;  
    text-align: center;  
    white-space: nowrap;  
    overflow: hidden;
            }
.box2{
    width: 200px;  
    height: 200px;  
    border: solid 1px #ccc;  
    display: inline-block;  
    vertical-align: middle;         
           }