Question

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

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

以下是CSS的相关部分。

.second_menu {
width: 100%;
font-size: 16px;
text-transform: uppercase;
padding: 0;
margin: 20px 0;
font-weight: normal;
li {
    padding: .5em 0;
    width: 50%;
    float: left;
    display: inline-block;
    text-align: center;
    border: 1px solid white;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    opacity: 0.55;
    filter: alpha(opacity=55);
    zoom: 1;
    @media (max-width: @screen-xs-min) {
        width: 100%;
    }
}
a {
    color: white;
    width:auto;
    }

}

这会创建可在此处找到的第二级导航：http://heritageco.wpengine.com/。我需要访问者能够在第二级菜单上单击背景div进行导航。

我尝试过使用一些jquery，如下所示：

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

以及使用“display：block;”的CSS但是我无法让它发挥作用。

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

Answer 1

为什么不在<a>标记中添加填充，并填充空格。这意味着整个框将是一个链接。

请参阅http://codepen.io/anon/pen/mLuhx

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;
}

Answer 2

这里你想要的是让标签包含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>

或者，如果你想保持相同的结构：只需将它添加到你的css：

.second_menu li a {
display:block;
}

你想要这种特殊性，因为显示块会在li元素中打破你的另一个标签。

导航栏填充div，WordPress菜单

2 个答案: