Hi i have problem with my menus...
when i click the menus, then sub menu will be dropdown...
but i want to change it to mouse over . not click~
what do i have to change it ?
Plz help T_T
---------------------------------------------
this is the jquery source ...
jQuery(function($){
// Frequently Asked Question
var li = $('.menu>.li');
li.addClass('off');
$('.menu .on').find('.depth2Wrap').show();
//li.eq(0).removeClass('off');
//li.eq(0).find('.a').show();
$('.menu>.li div.bottomBg>a').click(function(){
var myArticle = $(this).parents('.li:first');
if(myArticle.hasClass('off')){
li.addClass('off').removeClass('on');
li.find('.depth2Wrap').slideUp(100);
myArticle.removeClass('off').addClass('on');
myArticle.find('.depth2Wrap').slideDown(100);
li.removeClass('fir_sele');
} else {
myArticle.removeClass('on').addClass('off');
myArticle.find('.depth2Wrap').slideUp(100);
li.removeClass('fir_sele');
}
return false;
});
});
----------------------------------------------------
This is HTML
<ul class="menu">
<li class="li"><a class="depth1" href="#">MENU1</a></li>
<li class="li"><a class="depth1" href="#">MENU2</a></li>
<li class="li">
<a class="depth1" href="#">MENU3</a>
<div class="depth2Wrap">
<ul class="depth2">
<li class=""><a href="#">SUB-MENU1</a></li>
<li class=""><a href="#">SUB-MENU2</a></li>
</ul>
</div>
</li>
<li class="li">
<a class="depth1" href="#">MENU4</a>
<div class="depth2Wrap">
<ul class="depth2">
<li class="on"><a href="#">SUB-MENU1</a></li>
<li class=""><a href="#">SUB-MENU2</a></li>
</ul>
</div>
</li>
</ul>
--------------------------------------------
this is CSS
.menu {width:100%; border-bottom:1px solid #60738a;}
.menu .depth2Wrap {display:none; overflow:hidden;}
.menu .depth1 {color:#fff; display:block; height:40px; overflow:hidden; }
.menu .depth1 span { display:block; padding:3px 0 0 10px; }
.menu .depth1 em { padding:0 0 0 10px; ;}
.menu .on .depth1 { color:#84bcf1; font-weight:bold; }
.menu .on .depth1 span {color:#b9ddff ; font-weight:normal}
.menu .bottomBg { border-bottom:1px solid #28476c; }
.menu li.on { background:url(../images/common/bg_menu_top.gif) no-repeat top; }
.menu .depth1:hover {color:#84bcf1; }
.menu .depth1:hover span {color:#b9ddff ; font-weight:normal }
.depth2 {padding:2px 0;}
.depth2 li a {color:#84bcf1; font-weight:bold; padding:6px 0; display:block; padding-left:40px; ;}
.depth2 .on a, .d2 li a:hover { color:#bddb1a;}