Question

我试图强制此示例中的li / a元素占据您在此处可以看到的svg-snap动画菜单的全部宽度...

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

我最近的尝试就在这里......

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

我一直在玩我发现的其他各种帖子的建议（例如How do I force nested list items to be the same width as parent list item?）但到目前为止还没有任何效果。

我对原作所做的唯一重大改变是将这些行添加到＆＃34; .menu__inner {＆＃34;

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上的填充并将其应用于实际链接，现在悬停区域会扩展为包括填充区域和链接本身。

强制li元素继承其容器的整个宽度

2 个答案: