使用jQuery和偏移量
问题描述:
我有一些问题,我现在正在努力解决它一段时间。 顶级菜单正在工作......很奇怪。 要查看问题,请转到:proba.dalipro.com。使用jQuery和偏移量
JS控制菜单:
var timeoutID;
jQuery(function(){
jQuery('.dropdown').mouseenter(function(){
jQuery('.sublinks').stop(false, true).hide();
window.clearTimeout(timeoutID);
var submenu = jQuery(this).parent().next();
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
left: jQuery(this).offset().left + 'px',
zIndex:100
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
jQuery(this).slideUp(300);
});
submenu.mouseenter(function(){
window.clearTimeout(timeoutID);
});
});
jQuery('.dropdown').mouseleave(function(){
// timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).hide();}, 250); // just hide
timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).slideUp(300);}, 250); // slide up
});
});
和CSS菜单:
/* CSS For Dropdown Menu Start */
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
}
#menu_top ul li
{
display:inline;
float:left;
}
#menu_top ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
border: 1px solid #560E00;
}
#menu_top ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
border: 1px solid #000000;
}
#menu_top ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
#menu_top ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
#menu_top ul li.sublinks
{
display:none;
position: relative;
}
/* CSS For Dropdown Menu End */
我需要做些什么来解决下拉功能是什么?
答
采取left
出来的子菜单的CSS:
此外,在样式表改变#menu_top ul
和#menu_top ul li
到:
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
float: left
position: relative;
}
#menu_top ul li
{
}
+0
它工作很棒:)。感谢您的帮助 :) – Sasha 2011-12-28 19:42:40
链接没有工作,与子域,但dalipro.com为我工作 – 2011-12-28 19:31:04
修复它如何?你需要更具体的问题。 – 2011-12-28 19:32:29