嘿，看你用的是Astra主题的移动菜单对吧？刚好我之前帮别人解决过几乎一模一样的问题——就是想让带自定义链接（#）的父菜单项，点击整个文本区域都能展开子菜单，而不是只能点那小小的箭头。咱们用几行CSS就能搞定，不用改主题代码或者加插件。

先给你拆解下问题：从你贴的HTML结构能看到，每个带子菜单的父项里都有个<button class="ast-menu-toggle">，这才是实际触发子菜单展开/收起的元素，但默认它只占箭头那一小块位置。我们要做的就是把这个按钮的点击区域扩大到整个父菜单项的宽度，同时不影响原来的视觉效果。

直接上可用的CSS代码：

/* 仅在移动端生效的菜单调整 */
@media (max-width: 921px) {
  /* 给带子菜单的父菜单项设置相对定位，作为按钮的定位基准 */
  .menu-item-has-children {
    position: relative;
  }

  /* 把触发按钮扩展到整个菜单项的范围 */
  .menu-item-has-children .ast-menu-toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 让按钮透明，不遮挡原有文字和箭头 */
    z-index: 10; /* 确保按钮在最上层，能优先接收点击事件 */
  }

  /* 确保箭头图标始终可见，提示用户这是可展开菜单 */
  .menu-item-has-children .dropdown-menu-toggle {
    position: relative;
    z-index: 20;
  }
}

代码说明： #

• 媒体查询max-width: 921px是Astra主题默认的移动端断点，如果你的主题设置了不同的断点，直接修改这个数值就行。
• 把父菜单项设为相对定位，是为了让绝对定位的按钮能以它为基准铺满整个区域。
• 透明化按钮是关键——这样用户看不到按钮，但点击菜单项的任何地方都会触发按钮的展开/收起事件，同时原来的文字和箭头还能正常显示。
• 最后给箭头设更高的z-index，防止它被透明按钮遮挡住。

如果这段CSS生效不明显，可能是主题原有样式的优先级更高，你可以试试给属性加上!important（比如width: 100% !important;），不过尽量优先调整选择器的优先级，实在不行再用这个办法。

另外，因为你的父菜单项用的是#链接，点击后不会跳转页面，所以这个方案完全不会影响用户体验，完美解决你要的“点击子菜单文本就能展开”的需求~

内容来源于stack exchange