Question

我有一个无序列表，在LI里面，下面是下拉菜单。

Dropdown使用JQ / JS作为隐藏/显示状态。当它在列表项上下移时，如果它下降，我如何在该项（主LI）上保留背景颜色/图像，就像我将处于活动状态一样，直到光标移出Dropdown区域。

这是否需要创建另一个DIV块来包含所有元素？（菜单，子菜单，JS）如果是这样，那么另外几行JS就是这样的情况？

还是有一种更简单的方法来实现这个用css ...因为我想不出办法。希望我的问题很明确，请忽略所有不必要的HTML和CSS代码，

感谢。

JS

$(function () {
$('.dropdown, .dropdown2, .dropdown3').each(function () {
$(this).parent().eq(0).hover(function () {
$('.dropdown, .dropdown2, .dropdown3:eq(0)', this).show();
}, function () {
$('.dropdown, .dropdown2, .dropdown3:eq(0)', this).hide();
});
});
});

HTML

<ul id="nav-container">
    <li><a href="#"><span>Home</span></a>
    <ul class="dropdown">
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    </ul>
    </li>

    <li><a href="#"><span>Services</span></a>
    <ul class="dropdown2">
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    </ul>
    </li>

    <li><a href="#"><span>Contact</span></a>
    <ul class="dropdown3">
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    </ul>
    </li>
</ul><!--nav-container-->

MENU CSS

#nav-container  {
 display: block;
 width: 900px;
 float: right;
 position: relative;
 left: 120px;
}
#nav-container li a span {
 display: inline;
 height: 36px;
 padding-top: 12px;
 padding-left: 13px;
 padding-right: 14px;
 float: left;
}
#nav-container .active-link span   {
 background-image: url(../img/navlist_bg2.gif);
 background-repeat: repeat-x;
 display: block;
 color: #000;

}

#nav-container li a:hover span {
 display: block;
 background-image: url(../img/navlist_bg2.gif);
 background-repeat: repeat-x;
}
#nav-container .active {
 background-image: url(../img/navlist_bg2.gif);
 background-repeat: repeat-x;
}

#nav-container li  {
 list-style-type: none;
 display: inline;
}

SUB MENU CSS（dropdown2，dropdown3与定位相同）

ul.dropdown
{
 margin: 0;
 padding: 0;
 display: block;
 position: absolute;
 z-index: 999;
 top: 100%;
 width: 300px;
 display: none;
 left: 80px;
 font-size: 11px;
 height: 90px;
}

ul.dropdown ul.dropdown
{
 top: 0;
 left: 95%;
}


ul.dropdown li
{
 margin: 0;
 padding: 0;
 float: none;
 position: relative;
 list-style: none;
 display: block;
 color: #3C3C3C;
}

ul.dropdown li a
{
 display: block;
 color: #3C3C3C;
 font-size: 11px;
}
ul.dropdown li a span {
 font-size: 11px;
 color: #3C3C3C;
}

Answer 1

JS：

$(function () {
$('.menu1').hover(function () {
$('.link').addClass('active');
$('.dropdown1').show;
}, function () {
$('.dropdown1').hide;
$('.link').removeClass('active');
});
});
});

HTML：

<li class="menu1"><a class="link" href="#"><span>Home</span></a>
<ul class="dropdown1">
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
<li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
</ul>
</li>

对所有基本菜单项（hover1,2,3等）重复此操作

将后台活动状态保持为悬停状态？

1 个答案: