2011-12-28 10 views
1

私は少し問題があり、今私はそれをしばらく解決しようとしています。 トップメニューが動作しています...奇妙です。 問題を確認するには、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 */ 

私は機能をドロップダウン修正するために必要か?

が ​​

また、にあなたのスタイルシートに#menu_top ul#menu_top ul liを変更します:

+0

リンクのdidntの仕事が、私のために働いdalipro.com –

+0

解決方法あなたはあなたの質問をより具体的にする必要があります。 –

答えて

4

は、サブメニューのCSSの外にleftを取るサブドメインで

#menu_top ul 
{ 
    list-style:none; 
    padding:0px; 
    margin:0px; 
    float: left 
    position: relative; 
} 

#menu_top ul li 
{ 

} 
+0

すごくうまいです:)。ご協力ありがとうございました :) – Sasha

関連する問題