如何将填充添加到垂直下拉菜单而不需要弄错下拉菜单？

Question

我希望我的垂直下拉菜单的父项选项卡具有填充和子选项卡位于正确的位置。

你看，如果我没有周围的父标签（here）任何填充，它看起来像这样：

如果我身边有父标签（here）填充，它搅乱了整个下拉，它看起来像这样：

我想什么下拉做的是双方围绕父标签（如第二图像）填充和正常的下拉列表（如第一）。当我在父标签周围添加填充时，如何防止在整个下拉列表中出现这种奇怪的填充？有没有其他的方式来增加父母标签周围的空间不会导致这个问题？我知道负填充/边际可能有用，但是有更好的解决方案吗？

理想的报头（Photoshop处理，不截图）的实施例：

这里的区别是：

ul li {padding: 10px;} 

没有UL里填充，它看起来像图像1.有了它，它看起来像图片2.

Answer 1

@Grace Sawyer，这是一个特殊问题。当您执行代码ul li { padding 10px; }时，您的子菜单中的列表项将继承样式。克服这一点的一种方法是添加选择这些子菜单列表项并直接设置它们的样式。这样它覆盖了继承的样式。如果你需要一个复习或对CSS来说是新手，这是一篇很好的文章，我经常引用它来引用specificity。

如果这几行代码添加到您的CSS，你会得到你想要的结果

nav ul li { padding: 15px; } 

nav ul li ul li { padding: 0px;} 

我还分叉您的jsfiddle和执行的代码，这样你就可以在行动here看到它。