填充响应式导航菜单的子元素，即移动菜单

Question

我正试图为我的网站提供移动菜单。当我将 padding-left：40px; 应用于菜单的 ul ul a 标记时。它会导致右侧溢出。有人可以给我一个解决这个问题的建议。

我知道我应该处理这些代码，但我不知道有什么问题

.mobile-menu ul a {
    padding-left : 40px;
}
.mobile-menu ul ul a {
    padding-left : 60px;
}

到目前为止，我可以实现以下目标，此时我已经卡住了

jsfiddle

Screenshot

这就是我想要的： Screenshot

Answer 1

如果您打算为＆＃34;我的帐户＆＃34;提供相同的宽度。和＆＃34;购物车＆＃34;，您可以移除购物车周围的ul。这是列表项中的新列表，导致更改宽度。

Updated jsFiddle

如果您想让所有菜单项具有相同的宽度......

  

为什么子元素比第一个更长？

由于浏览器默认-webkit-padding-start CSS属性。 FYA，它被设置为40px。

  

我怎么能达到他们会有相同的宽度？

在padding: 0上设置ul。

.mobile-menu ul {
  padding: 0;
}

Another Version jsFiddle

Answer 2

设置包含元素的宽度，在本例中为顶级ul。 你现在正在做的是在所有锚点上设置一个宽度，无论它们处于什么级别。