如何在WordPress子菜单中添加菜单项间距

我完全不懂代码，自行搭建WordPress站点时遇到了问题：想给子菜单（sub-menu）里的菜单项添加上下间距。

• 当前效果：子菜单中的菜单项上下紧密排列，没有明显间隔
• 期望效果：子菜单的菜单项之间有清晰的上下间距

相关代码参考 #

HTML结构

<ul class="sub-menu">
    <li id="menu-item-3259" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3259"><a href="https://www.danielpainter.at/personen/?customize_changeset_uuid=a01ae230-11ac-4842-b96d-97f9812df568&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on"><span>Personen</span></a></li>
    <li id="menu-item-4657" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4657"><a href="https://www.danielpainter.at/urbex/?customize_changeset_uuid=a01ae230-11ac-4842-b96d-97f9812df568&amp;customize_messenger_channel=preview-0&amp;customize_autosaved=on"><span>Urbex</span></a></li>
</ul>

当前子菜单CSS

.navigation .sub-menu, .navigation .children {
    top: 100%;
}
.navigation .sub-menu, .navigation .children {
    position: absolute;
    background: #ffffff;
    width: 200px;
    left: 0;
    top: 60px;
    border: 1px solid #464646;
    text-transform: uppercase;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 5;
}

零基础操作步骤 #

不需要修改主题文件，直接在WordPress后台添加自定义CSS即可：

1. 登录WordPress后台，点击左侧菜单栏的「外观」→「自定义」
2. 在弹出的自定义界面中，找到「额外CSS」（部分主题叫「自定义CSS」）选项
3. 将下面的代码粘贴到输入框中，点击「发布」保存设置：

/* 给子菜单菜单项添加上下内边距 */
.navigation .sub-menu .menu-item {
    padding: 10px 0;
}

• 可以调整10px的数值，比如改成15px就是更大的间距
• 如果上面的代码没生效，试试添加!important强制生效：

.navigation .sub-menu .menu-item {
    padding: 10px 0 !important;
}

• 也可以用外边距替代内边距，效果略有不同，代码如下：

.navigation .sub-menu .menu-item {
    margin: 8px 0;
}

内容的提问来源于stack exchange，提问作者Daniel