Wordpress,如何使整个子菜单下拉块可点击?

时间:2018-05-02 08:17:53

标签: css wordpress drop-down-menu navbar navigationbar

我使用以下代码在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>。但是怎么样? 请告诉我如何使用csswp_nav_menu($arg);或我还有其他替代方法来做到这一点?

非常感谢

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

你应该让<a>标签覆盖整个父母的宽度和高度:

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

注意:如果这不起作用,您还为liul及其深层父母(以像素或百分比)设置了一定的高度和宽度,直到您确保100%具有这个块元素的明确含义。