css - 使用 CSS 在鼠标悬停在子菜单上时保持顶级导航悬停效果

标签 css navigation nav

当我悬停在子菜单项上时,我想让我的顶级导航保持悬停状态。我读到我应该将悬停效果应用于 li,但是有一些过渡让我感到困惑。我想不通。谁能告诉我哪里需要调整?

my jsfiddle

最佳答案

您将要将 :hover 效果应用于 li 并将 CSS 应用于直接 a 子级。将悬停应用于 a 将不起作用,因为顶级链接的子菜单不在 a 元素中。

ul#navigation .topNav:hover > a {
    color:#acb453;
    padding-top:0;
    padding-bottom:10px;
    border-bottom: 6px solid #4dbaf2;
}

http://jsfiddle.net/zwVwh/12/

关于css - 使用 CSS 在鼠标悬停在子菜单上时保持顶级导航悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11917108/

相关文章:

javascript - 将键盘箭头导航添加到自定义js

html - Foundation 6 - 使用CSS正确排列Header图片和Nav

javascript - jQuery:延迟替换 div 的 innerHTML?

jquery - 简单的 jQuery 和 CSS 导航在刷新时随机无法正常工作...所有浏览器

css - 根据内部列表元素的数量调整 div 宽度

css - 导航背景图像 100% 页面高度

css - 与 Z-Index 发生戏剧性关系

javascript - 我正在尝试使用 Particle js 让粒子出现在这个网站的主要英雄部分,但它不起作用

html - 隐藏元素但为屏幕阅读器保留(不能使用显示 :none, 可见性 :hidden, 或不透明度:0)

javascript - 在移动设备上查看时布局扭曲