用jquery实现二级下拉菜单

<div id="filters">
   <ul class="btn_filter">
        <li>
            <a class="dropdown" href="#filter_a">A</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_b">B</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_c">C</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_d">D</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_e">E</a>
        </li>
        <li>
            <a class="dropdown" href="#filter_f">F</a>
        </li>
    </ul>
    <div id="filter_a" class="filter" style="display:block">A</div>
    <div id="filter_b" class="filter" style="display:none">B</div>
    <div id="filter_c" class="filter" style="display:none">C</div>
    <div id="filter_d" class="filter" style="display:none">D</div>
    <div id="filter_e" class="filter" style="display:none">E</div>
    <div id="filter_f" class="filter" style="display:none">F</div>
</div>

这种下拉列表怎么做？当鼠标移动到li>a上,显示对应的div。而且鼠标能移动到div上，二级菜单不消失。

引用文字

---

按照你的目录结构来编写html结构。
配合css和jquery。
这样只要在一级结构中加上鼠标事件，这样鼠标放到二级结构的时候，也还是会显示的。

---

用jquery实现：

var k=false; // 当前一级菜单Dom对象
var r=false; // 当前二级菜单Dom对象

$("#filters").find("a.dropdown").mouseover(function(){
    var A=this.getAttribute("href").replace(/^[^#]/,"");
    flagDomObj();
    k=$(this).addClass("current"); //为当前一级导航添加样式，且 k=true
    r=$(A).show();      //显示二级导航，且r=true
}).click(function(){return false});

$("#filters").mouseleave(function(){
    flagDomObj(); //鼠标移出导航栏，还原上一个事件
});
function flagDomObj(){ //鼠标滑动到另一个一级菜单上,还原上一个一级和二级菜单导航的状态
    if(k){
        k.hide();
        r.removeClass('current');
        k=false;
        r=false;
    }
}