CSS или JS для элемента списка без дочерних элементов из элемента списка с дочерним элементом

Question

Я создаю выпадающее меню и хочу добавить закругленные границы на всех четырех углах при наведении, если основной элемент списка не имеет подменю, но я хочу, чтобы только верхние углы были закруглены при наведении, если элемент списка меню имеет подменю , Само подменю не будет иметь никаких округлых границ и будет сливаться с вкладкой родителя. HTML, который создает меню, получен из функции WordPress (wp_page_menu), которая не создает различные классы CSS для тега li без дочерних элементов и тега 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 (пока).Вы можете использовать решение, которое @ c-smile разместил для этого.