ここにフィドルを用意しました：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;
}
私がやろうとしているのは、各ドロップダウン セクションのスペースを空けることですが、それを行う方法が思いつきません。
その上で、子要素の 1 つがホバーされると、黒い境界線が適用されますが、下に既に境界線があるため、少し見苦しくなります。素晴らしいです。