如何在不丢弃下拉列表的情况下将填充添加到垂直下拉列表？

Question

我希望我的垂直下拉菜单的父标签有填充和子标签位于正确的位置。

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

如果我在父标签（here）周围填充，它会弄乱整个下拉列表，它看起来像这样：

我想要的下拉列表是在父标签（如第二张图片）和正常下拉列表（如第一张图片）周围有两个填充。当我在父标签周围添加填充时，如何防止整个下拉列表中出现这种奇怪的填充？是否有另一种方法可以在父选项卡周围添加不​​会导致此问题的空间？我知道负填充/边距可能有效，但是有更好的解决方案吗？

理想标题的示例（photoshopped，而不是屏幕截图）：

区别在于：

ul li {padding: 10px;}

没有ul li填充，它看起来像图像1.有了它，它看起来像图像。

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中看到它。