@Mecitan
Начинающий web-разработчик

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

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

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

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


Я буду очень сильно благодарен за этот маленький кодревью.
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 1
kryamk
@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;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы