Html 强制li元素继承其容器的全宽

我试图强制本例中的li/a元素采用svg快照动画菜单的全宽，您可以在这里看到

我最近一次来这里

当前的问题很简单，li/a元素从父ul元素的左侧开始缩进，这意味着如果您将鼠标稍微悬停在展开菜单文本的左侧，则不会获得悬停效果（即文本不会改变颜色）

我一直在玩弄我发现的其他各种帖子的建议（例如），但到目前为止，没有任何东西能达到预期的效果

我对原始版本所做的唯一重大更改是将这些行添加到“.menu_uu_uinternal{”

---

这至少确保了li元素具有正确的宽度。因此，现在我只是想弄清楚什么样的css属性可以让我将元素向左偏移正确的量-非常感谢任何想法！

从

菜单中删除
浮动：左；
，并添加1-5px或任何y的填充你觉得合适

您的代码：

.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);
}

希望这有帮助！

我所做的只是添加了以下CSS：

ul.menu__inner{
  padding-left:0;
}

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

这将从父级
ul
中删除填充，并将其应用于子级
li a

此问题是由于父级
ul
包括默认的
填充
并将
a
链接悬停区推到右侧造成的

通过删除
ul
上的填充并将其应用于实际链接，悬停区域现在扩展为包括填充区域以及链接本身。
您不能删除ul上的填充并将其添加到LIs吗？这非常有效，谢谢！显然需要等待4分钟才能接受答案！您完全失败了欢迎光临，祝开发顺利！菜单看起来已经不错了@d3wannabe（别忘了接受）也很好用-谢谢Alvin-尤其是像原文一样position@d3wannabe-没问题，希望有帮助。
ul.menu__inner{
  padding-left:0;
}

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