在mouseout上隐藏子菜单

Question

在“Saree”悬停时，显示子菜单div（id：second-level）。现在，当我将指针移离子菜单屏幕时，我想隐藏这个div。但是使用下面的代码，每当我将鼠标悬停在子菜单上时，它都会被隐藏。

   j("#saree-menu").hover(function(){
        j("#second-level").show().mouseout(function(){
        j("#second-level").hide();
        });
    });

phtml代码

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('level1-menu')->toHtml(); ?>

<div id="second-level" class="second-level" style="display:none;">
<ul style="position:absolute">
    <li class="saree_menu"><?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('saree-menu')->toHtml(); ?></li>
</ul>
</div>

当我把指针远离它时，我怎么能隐藏子菜单div？

Answer 1

试试这个：

j("#second-level").mouseout(function(){
    $("p").css("display", "none");
});

或使用hide()。

Answer 2

我真的不明白你为什么要使用jQuery，所以我会给你一个CSS答案。

#saree-menu:hover #second-level {
   display: block; /*or whatever you want to do with #second level*/
}

当您将鼠标悬停在saree-menu上时，它会执行{}之间的任何操作，并在您离开时停止执行此操作。

Answer 3

尝试使用它：

j("#saree-menu").hover(function(){
j("#second-level").show();
});    
j("#saree-menu").mouseout(function(){
    j("#second-level").hide();
});

Answer 4

您可以查看以下链接。

Fiddle

 #navigation{position:relative}
.sub-menu{position:absolute;display:none}
ul, li {list-style:none;margin:0;padding:0;display:inline}
.sum-menu li, .sub-menu ul {display:block}