Javascript 导航栏锚定填充div，WordPress菜单

我正在建立一个有三个菜单导航的网站。第二级菜单使用WordPress菜单生成，如下所示：

<div class="second_menu">
    <?php wp_nav_menu( array('menu' => 'heritage_overview', 'menu_class' => 'second_menu')); ?>
</div>

}

这将创建可在此处找到的第二级导航：。我需要访问者能够点击二级菜单上的背景div进行导航

我尝试过使用一些jquery，比如：

jQuery("#menu-item-33").click(function(){
    ("<a href='/heritage-pacific-group/about/'></a>").click(); 
}); 

jQuery（#菜单项-33”）。单击（函数（）{
（“”）。单击（）；
}); 

以及使用“display:block”的CSS，但我一直无法让它工作

---

有人知道一个相对简单的解决方案吗？

为什么不在

这里您想要的是让标记包含li元素，而不是反过来。把它翻过来，你就会得到你想要的。您可能需要添加一些css来解释样式的变化。但通过这种方式，整个li将是可点击的，并且响应迅速

<a href="http://heritageco.wpengine.com/heritage-pacific-group/">
  <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">Heritage Pacific Group
  </li>
</a>

您需要这种特殊性，因为显示块将打断li元素中的其他a标记。
因此，为了清楚起见，您希望文本的背景可以单击？你可以按照你的想法做，只需添加一点填充物。。。尝试将此行添加到“a”css：padding:5px 10px；对不起，我现在明白你的意思了，你是在谈论最外层的导航，而不是最内层的导航。是的，我试过这样做，但当你在菜单分界处缩小页面时，它没有响应。你想要的是a来继承边界元素的宽度，对吗？所以这段代码是使用WordPress菜单函数生成的。你知道如何让WordPress像你建议的那样吐出菜单吗？对WordPress不太熟悉…对不起。您是否尝试添加上面的css？
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  float: left;
  display: block;
  width: 50%; 
  text-align: center;
}



li a {
  width: 100%;
  display: block;
  color: #fff;
  text-decoration: none;
}

#link-1 a {
  background: red;
}

#link-2 a {
  background: green; 
} 

#link-1 a:hover {
  background: orange;
}

#link-2 a:hover {
  background: blue;
}

<a href="http://heritageco.wpengine.com/heritage-pacific-group/">
  <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">Heritage Pacific Group
  </li>
</a>

.second_menu li a {
display:block;
}