Wordpress，如何使整个子菜单下拉块可点击？

Question

我正在使用下面的代码在 header.php

中显示我的菜单

 $arg = array(
      'menu' => 'top',
      'theme_location' => 'top',
      'menu_class' => 'nav navbar-nav', );
wp_nav_menu($arg);

通过添加右 css 我能够在鼠标悬停时正确显示子菜单。但是，在鼠标悬停时，只有子菜单块内的文本是可点击的，子菜单块的其余部分不可点击。此外，页面源代码中的代码证实了这一点，它看起来像这样：

<ul id="menu-top" class="nav navbar-nav" >
 <li>
     <ul class="sub-menu" >
         <li id="menu-item-75" ><a href="http://.....">link text</a> </li>
     </ul>
  </li>
</ul>

但是，我希望整个子菜单块都可以点击，我认为如果我能以某种方式将锚代码放在 <li>...</li> 之外，那么它就会起作用，看起来应该是这样的像这样：<a href=""><li>....</li></a>。但是怎么办？请告诉我如何仅通过使用 css 或 wp_nav_menu($arg); 或我有哪些其他选择来做到这一点？

非常感谢

Answer 1

您应该使 <a> 标签覆盖其父标签的整个宽度和高度：

.sub-menu li a{
   display:block;
   width:100%;
   height:100%;
}

注意：如果这不起作用，您还为 li 和 ul 及其深度父级设置了特定的高度和宽度（以像素或百分比为单位），直到您确保 100 % 对此块元素有明确的含义。

Answer 2

/* css Solution */
.sub-menu li {
width: 100%;
height:100%;
 display: block;
}
.sub-menu li a {
    display:block;
    width: 100%;
    height: 20px;
}

Wordpress，如何使整个子菜单下拉块可点击？

Wordpress, how to make the whole sub-menu dropdown block clickable?

css

wordpress

navbar

navigationbar

drop-down-menu