悬停在下拉菜单项上时父菜单项的活动状态答案

【问题标题】：Active state on parent menu item when hovering on drop down menu item悬停在下拉菜单项上时父菜单项的活动状态
【发布时间】：2015-12-07 09:49:25
【问题描述】：

我已经阅读了一些针对此问题的解决方案，但没有一个答案对我的特定问题有帮助。在我正在开发的网站上，我有一个带有下拉菜单的菜单。

http://www.staging.alexanderdzine.com.au/golden-sands-tavern-V2/

当我将鼠标悬停在下拉列表 li 上时，我希望箭头 bg 保持活动状态，但无法弄清楚。

HTML

<div class="Weekday">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Monday</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="../html/whats-on.html"><img src="../images/backgrounds/test.jpg" width="230" height="280" alt="" title="" /></a></li>
</ul>
</dd>
</dl>
</div> <!-- end Weekday div -->

CSS

.dropdown {float:left;}
.dropdown dt{width:114px;padding:0;font-weight:bold;cursor:pointer;line-height:50px;text-align:center;color:#193540;font-size:14px;letter-spacing:1px;text-transform:uppercase;}
.dropdown dt:hover {background:url(../images/backgrounds/bkg_nav-dropdown.png) center no-repeat;}
.dropdown dd {position:relative;left:-135px;overflow:hidden;width:250px;display:none;z-index:200;opacity:0;right:0;}
.dropdown ul {width:250px;list-style:none;}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited{display:block;background:#6ab7d3;width:250px !important;height:300px !important;}
.dropdown img{background:#6ab7d3;padding:10px;}

【问题讨论】：

标签： css hover

【解决方案1】：

这在 CSS 中可能无法实现，大多数人使用 jQuery 来处理这类事情，但也许你可以尝试在 .Weekday 中添加悬停功能，因为当你悬停在子菜单上时它的悬停状态会持续存在..

如果你想用 jQuery 实现你想要的功能，我建议你阅读这篇文章的答案：change background of parent div on hover

另外，this 页面使用我提到的第一种方法 - 没有任何 jQuery。

【讨论】：