Подсказка генеалогического дерева css3 не работает правильно при добавлении тега div внутри li

Question

Я пытаюсь изменить семейное дерево css3, чтобы при щелчке пользователем на панели появлялось раскрывающееся меню. Чтобы добавить меню, я перемещаю тег <a> в пределах <div class = "dropdown">.

. После этого, когда я наводю курсор на поле, эффекты CSS применяются только в текущем поле, а не у детей. Я модифицировал исходный CSS, чтобы попытаться заставить его работать:

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li div a:hover, 
.tree li div:hover+ul li div a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li div a:hover+ul li div a::after, 
.tree li div a:hover+ul li div a::before, 
.tree li div a:hover+ul::before, 
.tree li div a:hover+ul ul::before{
    border-color:  #94a0b4;
}

Это работает, но проблема в том, что размер блока div больше, чем тег, и когда мышь находится рядом с помечать эффекты применяются.

Оригинал css:

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, 
.tree li a:hover+ul li a {
    background: #c8e4f8; 
    color: #000; 
    border: 1px solid #94a0b4;
}

/*Connector styles on hover*/
.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
    border-color:  #94a0b4;
}

Как это можно исправить?

Answer 1

inline-block - по ширине содержимого, block (по умолчанию для <div>) - по ширине родительского элемента:

div.dropdown { display: inline-block; }

Только не меняйте оригинал CSS:

/*Connector styles on hover*/
.tree li div:hover+ul li::after, 
.tree li div:hover+ul li::before, 
.tree li div:hover+ul::before, 
.tree li div:hover+ul ul::before{
    border-color:  #94a0b4;
}