【问题标题】:CSS Menu with border-radius on hover悬停时带有边框半径的 CSS 菜单
【发布时间】:2012-06-04 07:48:30
【问题描述】:

也许这是一个简单的解决方案,但我坚持下去。

这里有我的代码 http://jsbin.com/ejomuv 纯 CSS 菜单

我想要做的是在悬停时设置下拉按钮底部 0px 边框半径,但仅在下拉菜单上设置。

我试过了,但是没用,我知道我做的不对:

#nav li a .nav-dropdown:hover {
    border-bottom-left-radius: 0px; 
    border-bottom-right-radius: 0px;
}

【问题讨论】:

    标签: css drop-down-menu menu


    【解决方案1】:

    由于带有下拉菜单的锚标记使用action 而不是href,您可以使用以下选择器:

    #nav > li:hover > a[action]{
        border-bottom-left-radius: 0px; 
        border-bottom-right-radius: 0px;  
    }
    

    工作示例:http://jsbin.com/ejomuv/7/

    【讨论】:

    • 正在工作,但是,我将背景设置为黑色,因为您可以看到细节jsbin.com/ejomuv/5/edit#preview,这样,按钮底部始终没有半径
    • @DenisHoss 抱歉,我错过了:hover。我已经更新了我的答案。
    • 是的,我看到了,没有问题,一切都很好,但是现在当你悬停一个 sumbenu 时,按钮半径搞砸了。看jsbin.com/ejomuv/9/edit
    • @DenisHoss - 我认为你落后了一个更新;)(:hover 需要在li 上)
    • 没问题 - 乐于助人:)
    【解决方案2】:

    如果引用是正确的(由于缺少 HTML,我无法判断)它应该可以正常工作。但我认为这正是问题所在。也许尝试在您的语句中添加一个 !important 标志,看看是否有帮助。

    【讨论】:

    • HTML 没有丢失,请点击右边的编辑按钮,查看源代码:) jsbin.com/ejomuv/edit#html
    • 对不起...我没有注意到 jsbin 链接 ;)
    【解决方案3】:

    您可以使用> (Child selector) 定位元素。

    #nav > li:hover > a {
        border-radius: 6px 6px 0 0;
    }
    

    这将专门从#nav 到孩子li 结束时,再到孩子a

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-06-24
      • 2016-07-08
      • 2023-03-27
      • 2019-03-19
      • 2013-09-06
      相关资源
      最近更新 更多