0
我有以下的幻燈片代碼下拉菜單: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;
}
嘿喬治,你可以給jsFiddle添加一個例子嗎?我什麼都不是你的HTML。 – Siva
我還不確定什麼是錯的。不知怎的,子菜單的邊距爲40px。一個奇怪的方法是在子菜單ul上添加「margin-top:-40px」,以便子菜單向上移動。如果我找到更好的解決方案,我會讓你知道。 – Siva
是的,我已經知道我可以做到這一點,但是當我這樣做時出現問題 - 子菜單上下滑動以達到頂部邊緣,而不是從頂部滑下。在常規的CSS菜單中,它是如何修復的,但是它對jQuery並不能很好地工作。 –