如何在下拉菜单中的子菜单中保留父菜单
我正在尝试创建一个下拉菜单。 它运作良好。 我想把顶部的菜单当盘旋成白色。 向下移动到子菜单时，顶部菜单应保持白色。 但顶部菜单变成了正常的原始颜色。
如何在子菜单中移动鼠标时保持父菜单hover。
代码在这里：
HTML
JS
var timeout = 0; var closetimer = 0; var ddmenuitem = 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open) $('#jsddm > li').bind('mouseout', jsddm_timer)}); document.onclick = jsddm_close;
CSS
#jsddm { margin: 0; padding: 0; } #jsddm li { float: left; list-style: none; } #jsddm li a { display: block; padding: 5px 12px; padding-left:15px; padding-right:15px; text-decoration: none; border-right: 1px solid #DBDBDB; padding-bottom:6px; color: #EAFFED; white-space: nowrap} #jsddm li a:hover { background-color:#FFF; color:#000; } #jsddm li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border:#3895C0 1px solid; border-top:none; z-index:1001; margin-left:-2px; } #jsddm li ul li { float: none; display: inline; margin:0px; } #jsddm li ul li a { width: auto; background: #fff; color:#080CB2; font-weight:normal; font-size:11px; border-bottom:1px solid #CCC; text-decoration:none; width:180px; } #jsddm li ul li a:hover { text-decoration:underline; color:#080CB2; }
问题是由于“hover”状态在CSS中，所以当你离开“a”元素时，你会松开hover状态。
对代码进行一些修改应该可以使这个工作。
function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').css('visibility', 'visible'); $(">a", $(this)).css("background-color", "#FFF"); } function jsddm_close() { if (ddmenuitem) { ddmenuitem.css('visibility', 'hidden'); $(ddmenuitem).prev().css("background-color", ""); } }
注意：您在发布的代码中也缺少结束li标记
我不明白为什么你需要在这里使用JS。 我看过很多人试图制作简单的下拉菜单的例子，这些菜单没有花时间使用正确的HTML结构并使用CSS来操作元素。
除非你真的想要某种动画（再次使用CSS3转换来制作动画），我建议使用这个答案，我给了另一个有一段时间下拉问题的用户。
CSS下拉菜单推送页面内容
上面的链接为您提供了一个非常快速，直接的HTML + CSS下拉解决方案示例。 使用此示例，您可以通过仅使用HTML和CSS保持父选项“已选择”来实现您所寻找的内容。
编辑：
直接说出你的问题。 解决问题所需要做的就是设置CSS有点不同。
更改：
#jsddm li a:hover { background-color:#FFF; color:#000; }
至：
#jsddm li:hover a { background-color:#FFF; color:#000; }
如您所见，我选择li元素来使用:hover伪选择器而不是a标签。 这是因为您将子菜单ul包装在此标记内。 从技术上讲，它是父元素。