Какие надо внести правки, чтобы получить искомый результат?

Question

[Фёдор]

Здравствуйте! Нужен взгляд более опытных специалистов и рекомендация по изменению кода вёрстки. Надо, чтобы при наведении на ссылку выделялась вся строка вместе со счётчиком, как это показано на скриншоте ниже:

У меня получается выделить только элемент списка li. Как выделить всю строку, так и не смог понять.


Второй момент, взаимосвязан с первым
Так как выделяется, только элемент списка, а не вся строка, то соответственно пропадает эффект ховера подменю.

Последний момент, я не могу понять, почему кнопка слайдера накладывается поверх моего меню. Хотя для меню задан z-index. (На скрине выделено красным цветом)



Я буду очень сильно благодарен за этот маленький кодревью.

Comments

[Ankhena]

Так внесите счетчик внутрь li.
Зачем это count-product вообще?

<li><a href="#">Средства для ванной</a><span>(33)</span></li>

Про z-index читайте css.yoksel.ru/kontekst-nalozheniya

[Фёдор]

Ankhena, Я вносил. Получается, какой-то треш. Часа полтора провозился, но ничего путного не вышло. Это оказалось единственным решением. Хотя и неправильное, как я понимаю.

[Ankhena]

Фёдор, при такой разметке, как у вас, если текста в ссылке будет на 2 строчки, то все уедет.

[Фёдор]

Ankhena, Какие можете дать рекомендации?

[Ankhena]

Фёдор, я вроде уже дала их ещё в первом комментарии

[Фёдор]

Ankhena, для элемента ли всё равно не задаётся бэкгрануд на всю ширину блока. Начинается от маркера, а слева от него всё равно не заполняется цвет.

[Ankhena]

Фёдор, Если не умеете пользоваться инструментами разработчика в браузере, то обведите цветными outline'нами ul и li.
Вероятно, у ul есть padding, который вы не убрали.

Answer 1

[kryamk]

Элементы li ограничивает родитель ul
Поэтому .catalog-dropdown__list задать flex-grow: 1; либо width: 100%;

Но эти цифры справа реально мешают, и как советовали выше их нужно засунуть в li

<li><a href="#">Средства для ванной</a><span>(33)</span></li>

li {display: block;} 
a {display: flex; justify-content: space-between}

Можно конечно сделать так:

.count {
    position: absolute;
    right: 0;
    height: 100%;
}

Но это какая-то жесть

По поводу z-index тоже подкину статейку ( только что нагуглил )) )
Я сам ещё все тонкости не прознал, но фишка в том, что z-index не так прост (типа у кого больше тот и выше). Всякие там position: absolute, relative и прочие transform с opacity создают новые слои.
К примеру есть два блока абсолютно позиционированных, у первого z-index: 1; а у второго z-index: 2; И есть дочерний элемент у первого блога с z-index: 1000; но это ему не поможет, потому-что у родителя z-index: 1; дочерний блок находится в слое родителя
Вывод: либо поднимать слои тому кто должен быть выше: прописывая элементу, родителю, предку position: relative и z-index высокий,
либо опускать того, кто должен быть ниже: position: relative и z-index: -1;