Question

我有下面的下拉菜单代码：

jQuery(window).ready(function(){
    jQuery('.menu>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });

    jQuery('.menu>li>ul>li').hover(function(){
        jQuery(this).find('ul').first().stop(true,true).slideDown(400);
    }, 
    function(){
        jQuery(this).find('ul').first().stop(true,true).slideUp();
    });
});

它可以游泳，除非显示.menu ul ul，它会从其父项向下滑动一级，因此不能将鼠标悬停在它上面。我修正了使用负边距顶部的.menu ul ul，但是这样，slideDown函数看起来像是从中间滑动到顶部和底部，而不是从上到下滑动。有关如何通过jQuery或CSS对此进行永久性修复的任何建议吗？

这是CSS文件：

.menu {
         padding:0;
         margin: 0;
}

.menu ul{
         list-style: none;
         margin: 0;
         padding: 0;       
}

.menu li{ /*these will be main menu items*/
  list-style: none;
  float: left;
  line-height: 37px;
  font-family: Arial;
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.menu li ul { /*first drop-down*/
 left: -999em;
 position: absolute;
 width: 186px;
 z-index: 500;
 background: #666666;
 display: none;
}

.menu li:hover ul {
  left: auto;
}

.menu li ul ul {
 margin-left: 186px; 
 display: none;
}

.menu li ul li {
  text-align: left;
  width: 186px;
}

.menu a {
  display: block;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  margin: 0;
  padding-left: 30px;
  padding-right: 30px;
}

.menu li.active a {
  background: #454545;
}

.menu a:hover{
 color: #FBF4B6;
 background: #333;
}

.menu li ul li a {
  padding-left: 30px;
  padding-bottom:2px;
  padding-top:2px;
  border-bottom: 1px solid #999;
}

.menu li.active ul li a:hover {
  background: #333;
}

Answer 1

我终于找到了如何解决这个问题：http://jsfiddle.net/297t6/

.menu
{
    margin:0;
    padding:0;
}
.menu > li
{
    list-style:none;
    float:left;
    margin:0;
    padding:0;
    position:relative;
}
.menu a
{
    text-decoration:none;
    color:#fff;
    background:red;
    display:block;
    padding:10px;
}
.menu > li ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    z-index: 999;
}
.menu > li ul ul
{
    margin:0;
    padding:0;
    width:150px;
    position:absolute;
    display:none;
    left:150px;
    top:0;
    z-index: 999;
}
.menu > li ul li
{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
}

复制了CSS和Javascript（比我的更清洁），更改了类名称 - 它有效。

jQuery SlideDown子菜单最高保证金

1 个答案: