Заставить элементы li наследовать всю ширину своих контейнеров

Question

Я пытаюсь заставить элементы li / a в этом примере использовать всю ширину анимированного меню svg-snap, которое вы можете увидеть здесь...

http://tympanus.net/Development/ElasticSVGElements/dropdown.html

Моя последняя попытка быть здесь...

http://codepen.io/d3wannabe/pen/KdypYL

В настоящее время проблема заключается просто в том, что элементы li / a начинаются с отступа слева от родительского элемента ul - это означает, что если вы слегка наведете курсор на левую часть текста расширенного меню, вы не получите эффекта наведения (т. Е. Текст, получивший ' изменить цвет).

Я играл с предложениями из других постов, которые я нашел (например, Как заставить вложенные элементы списка быть такой же ширины, как родительский элемент списка?), Но пока ничего не дало желаемого эффекта.

Единственными существенными изменениями, которые я сделал в оригинале, было добавление этих строк в ".menu__inner {"

float:left;
width: 100%;
position: relative;

Что по крайней мере гарантирует, что элементы li имеют правильную ширину. Так что теперь я просто пытаюсь выяснить, какой атрибут css позволит мне сместить элементы влево на правильную величину - любые идеи очень ценятся!

Answer 1

Удалить float:left; от .menu__inner и добавьте отступ 1-5px или что-то другое.

Ваш код:

.menu__inner {
    list-style: none;
    font-size: 1.3em;
    margin: 0;
    float:left;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 0;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

Отредактированный код:

.menu__inner {
    list-style:none;
    padding-left:5px; /* added a padding */
    font-size: 1.3em;
    margin: 0;
    /* removed float:left */
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 0;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

Надеюсь это поможет!

Answer 2

http://codepen.io/anon/pen/meqeeL

Все, что я сделал, это добавил следующий CSS:

ul.menu__inner{
  padding-left:0;
}

ul.menu__inner li a{
  padding-left:40px;
}

Это удаляет отступы от родителя ul и применяет это к ребенку li a,

Эта проблема была из-за родителя ul в том числе по умолчанию padding и толкая a связать зону парения справа.

Сняв обивку на ul и вместо этого, применяя его к фактической ссылке, зона при наведении расширяется, включая область заполнения, а также саму ссылку.