jquery - jQuery 'Dropdown' 的 CSS 帮助

Question

我在这里准备了一个 fiddle :http://jsfiddle.net/zakbx/4/

HTML

<!-- filters -->
<ul class="blog-detail-dropdown">
<li>Select category
<ul class="sub_menu" id="sub_menu_category2">
    <li id="entertainment" class="14">Entertainment</li>
    <li id="film" class="15">Film</li>
    <li id="food" class="18">Food</li>
    <li id="mums" class="17">Mums</li>
    <li id="sport" class="16">Sport</li>
</ul>
</li>
<li>Sort by Blogger
<ul class="sub_menu" id="sub_menu_blogger2">
    <li class="2">Joe Bloggs</li>
    <li class="6">Keith Patterson</li>
    <li class="3">Martin Carlin</li>
    <li class="4">MC Hammer</li>
</ul>
</li>
<li>Sort by Milestone
<ul class="sub_menu" id="sub_menu_milestone2">
    <li class="7">Stage 1<span class="value">stage-1</span></li>
    <li class="8">Stage 2<span class="value">stage-2</span></li>
    <li class="9">Stage 3<span class="value">stage-3</span></li>
    <li class="10">Stage 4<span class="value">stage-4</span></li>
    <li class="11">Stage 5<span class="value">stage-5</span></li>                         
</ul>
</li>
</ul> <!-- end filter section -->

jQuery

$("ul.blog-detail-dropdown li").hover(function(){
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });​

CSS

/* 
    Level One
*/
ul.blog-detail-dropdown  { 
    position: relative;
    list-style: none;
    height: 58px;
    margin: 15px 0 150px 40px;

    *z-index: 999;

    *margin-left: -5px;
}


ul.blog-detail-dropdown li  { 
    height: 58px;
    padding: 5px 20px 0 20px;
    border: 1px solid #dedede;
    background: url('/images/filter-dropdown.png') #ffffff no-repeat 155px 26px;
    color: #555;
    font-weight: bold;
    line-height: 50px;
    text-decoration: none;
    display: block;
    width: 140px;
    font-size: 14px;
    cursor: pointer;
    zoom: 1;
}

ul.blog-detail-dropdown li:hover { 
    position: relative;
    background: url('images/filter-dropdown-hover.png') #555555 no-repeat 155px 26px; 
    color: #ffffff;
    border: 1px solid #000000;
}
/* 
    Level Two
*/
ul.blog-detail-dropdown ul  { 
    visibility: hidden;
    position: absolute;
    top: 64px;
    left: 0px;
    z-index: 999;
}

ul.blog-detail-dropdown ul li  { 
    font-weight: normal; 
    background: #ffffff; 
    color: #555555; 
    border-bottom: 1px solid #000000; 
    float: none;
}
/* IE 6 & 7 Needs Inline Block */

ul.blog-detail-dropdown ul li:hover  { 
    background: #cccccc;
    color: #555555;
}

ul.blog-detail-dropdown ul li span.value {
    display: none;
}​

我想做的只是隔开每个下拉部分，但想不出办法。

最重要的是，当悬停其中一个子元素时，会应用黑色边框，但由于底部已经有边框，所以最终看起来有点难看，如果有人可以帮助我解决这两个部分那就太好了。

Answer 1

这是你要找的吗？

http://jsfiddle.net/zakbx/27/