没有 child 的列表项的 CSS 或 JS 来自有 child 的兄弟列表项

Question

我正在创建一个下拉菜单，如果主列表项没有子菜单，我想在悬停时在所有四个 Angular 上添加圆 Angular ，但如果菜单列表项有子菜单，我只想在悬停时将顶 Angular 圆 Angular .子菜单本身不会有任何圆形边框，并且会融入父级的选项卡中。创建菜单的 HTML 派生自 WordPress 函数 (wp_page_menu)，该函数不会为没有子项的 li 标签和有子项的 li 标签创建不同的 CSS 类。

当鼠标悬停在列表项上时，此 CSS 在菜单列表项周围创建一个深灰色圆 Angular 矩形。但如果菜单列表项没有子项，我只需要这种效果。

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

---

好的，现在没有子项的主菜单列表项有 4 个圆 Angular 边框，而​​有子项的主菜单列表项只有顶部圆 Angular 边框。所以这很好。但是....现在子列表项也带有选项卡(即，子菜单继承了带有选项卡的父项的样式)。我已经对样式表大惊小怪了几个小时，却得不到我想要的。子列表项不应有任何圆 Angular 边框。使用 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) {  ... }