jQuery的子菜单了slideDown上边距

我有以下的幻灯片代码下拉菜单：jQuery的子菜单了slideDown上边距

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

它的工作原理顺顺当当，当显示。菜单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; 
}

来源

2014-03-24 George Chanturidze

嘿乔治，你可以给jsFiddle添加一个例子吗？我什么都不是你的HTML。 – Siva

我还不确定什么是错的。不知怎的，子菜单的边距为40px。一个奇怪的方法是在子菜单ul上添加“margin-top：-40px”，以便子菜单向上移动。如果我找到更好的解决方案，我会让你知道。 – Siva

是的，我已经知道我可以做到这一点，但是当我这样做时出现问题 - 子菜单上下滑动以达到顶部边缘，而不是从顶部滑下。在常规的CSS菜单中，它是如何修复的，但是它对jQuery并不能很好地工作。 –

我终于找到了如何在这里解决这个问题：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（这是比我干净多了），改类名称voilla - 它的作品。

来源

2014-03-25 16:48:46

jQuery的子菜单了slideDown上边距

回答

相关问题