Wordpress, как сделать весь выпадающий блок подменю кликабельным? - PullRequest
0 голосов
/ 02 мая 2018

Я использую приведенный ниже код для отображения моего меню внутри 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); или какие у меня есть альтернативы?

Большое спасибо

Ответы [ 2 ]

0 голосов
/ 02 мая 2018
/* css Solution */
.sub-menu li {
width: 100%;
height:100%;
 display: block;
}
.sub-menu li a {
    display:block;
    width: 100%;
    height: 20px;
}
0 голосов
/ 02 мая 2018

Вы должны сделать тег <a> на всю ширину и высоту своих родителей:

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

Примечание: если это не сработало, вы также задали определенную высоту и ширину для li и ul и их глубоких родителей (в пикселях или процентах), пока не убедитесь, что значение 100% имеет четкое значение для этот элемент блока.

...