Question

我正在创建一个下拉菜单，如果主列表项没有子菜单，我想在悬停的四个角上添加圆形边框，但是如果菜单列表项有一个子菜单，我只希望在悬停时将顶角四舍五入。子菜单本身不会有任何圆形边框，并且会混合到父级的选项卡中。创建菜单的HTML是从WordPress函数（wp_page_menu）派生的，该函数不会为没有子元素的li标记创建不同的CSS类，而对于带有子元素的li标签则不会。

当列表项被鼠标悬停时，此CSS在菜单列表项周围创建一个深灰色的圆角矩形。但是如果菜单列表项没有孩子，我只想要这个效果。

.menu ul li:hover a { 
    background:#111;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

好的，所以现在没有孩子的主菜单列表项有4个圆形边框，而有孩子的主菜单列表项只有顶部圆角边框。这很好。但是......现在，子列表项也是标签式的（即，子菜单是从选项卡式父级继承该样式）。我已经用样式表打了几个小时，无法得到我想要的东西。子项列表项不应具有任何圆形边框。使用jQuery和/或CSS，如何防止子菜单继承？

Answer 1

如果您在该网站上有jQuery，那么您可以放置类似这样的内容

$(function(){
  $('.menu li').has('ul').addClass('has-subitems');
});

这会将has-subitems类添加到具有子菜单的所有菜单项。之后，您可以在CSS中适当地设置它们的样式：

.menu li.has-subitems {  ... }
.menu li:not(.has-subitems) {  ... }

Answer 2

如果您只想要对某些角进行舍入，则可以使用border-top-left-radius，如下所示：

border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;

如果您尝试仅将此CSS添加到没有子项的<li>元素，则必须使用javascript / jQuery，因为它在CSS中尚未实现。您可以使用solution that @c-smile posted。

列表项的CSS或JS，没有带子项的兄弟列表项中的子项

2 个答案: