PURE CSS向下滚动菜单 - 无法保持顶部< li>当悬停在子菜单上时突出显示 [英] PURE CSS DROP DOWN MENU - Unable to keep top <li> highlighted when hovering over sub-menu

问题描述

我有一个下拉菜单中只有CSS和没有JAVASCRIPT，我有一个问题保持顶部（主菜单项）突出显示时，我移动光标在子菜单项。您可以在此处 http://www.codedecks.com/cssnav.html 查看菜单。

如果您将鼠标悬停在儿童上方，将光标向下移动，只要您的女孩高于顶部的儿童 b
$ b

任何建议都非常感谢！提前感谢

解决方案

变更 #nav> li a：hover 到 #nav>

由于您拥有隐藏的二级 ul li 被徘徊时，显示顶层 ，显示顶层 a 在同一时间悬停风格。当您将鼠标移到二级菜单链接上时， a 仍然显示为活动状态。 li：hover 即使将鼠标悬停在 li 的子元素上，即使它们的位置他们看起来像是在 li 的框外。

I have a drop down menu in only CSS and no JAVASCRIPT and I'm having a problem keeping the top (main menu item) highlighted when I move the cursor over the sub menu items. You can see the menu here http://www.codedecks.com/cssnav.html.

If you hover over "Kids" and move your cursor down, as soon as your over "Girls" the top "Kids" looses the highlight.

Any suggestion would be greatly appreciated! Thanks in advance

解决方案

Change #nav > li a:hover to #nav > li:hover a in your CSS.

Since you have the hidden second-level ul being shown when the top-level li is hovered, it makes sense to have the top-level a get the hover style at the same time. When you move your mouse over the second-level menu links, the a still looks active. li:hover applies even when you mouse over the child elements of the li, even if they're positioned so that they look like they're outside of the li's box.

这篇关于PURE CSS向下滚动菜单 - 无法保持顶部< li>当悬停在子菜单上时突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！