css - Bootstrap 4 使整个 li 区域在下拉菜单中可点击

Question

正在研究多级 bootstrap 4 菜单按钮并尝试解决可选区域的问题。

为了说明问题，我在当前可点击区域(黑色)上加了边框，并用(红色)突出显示了我要点击的区域尝试填充为可点击。

这是我的 fiddle :https://codepen.io/anon/pen/zWeqbE

初始下拉菜单

我想要整个 <li>突出显示并可点击 - 现在有一个上边距和下边距，我似乎无法摆脱。

子菜单

<a>链接是可点击的，但可点击区域仅限于链接本身，而我希望可点击区域填满整个 <li>

Answer 1

I would like to have the entire <li> are highlighted and clickable - right now there is a top margin and bottom margin which i can't seem to get rid off.

问题出在父级ul有一个填充和每个 .dropdown-divider有一个填充，可以通过将分隔符的填充移动到每个 <li> 来修复

The <a> links are clickable but the clickable area is limited to the link itself whereas i want the clickable area to fill the entire <li>

修复是移动dropdown menulink类别为 <a>而不是它的 parent <li>

示例码笔:https://codepen.io/anon/pen/zWeByy