Css 如何仅为WordPress上的顶级导航项目显示活动状态（如下划线）？

导航菜单由顶级项组成，其中一项称为“商店”

在“商店”中，下拉菜单中显示了子级别的项目。这些项目是产品类别，单击时，活动CSS状态（文本转换：下划线）仅显示在下拉菜单中，而不显示在“商店”按钮上

我需要在所有下拉项的“Shop”上显示此活动状态指示，因为当菜单不可见时，在下拉项上加下划线是没有意义的。完全破坏了用户体验

---

我正在使用WordPress和WooCommerce。

您需要使用当前菜单父菜单选择器向样式表添加一些代码。代码-

li.current-menu-parent > a{ text-decoration: underline; }

---

使用

当前菜单

类

---

.current menu祖先>一个{text decoration:underline；}

您可以仅向顶级项添加类名并设置该类名的样式

class Navigation_Menu extends Walker_Nav_Menu {

function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
    $id_field = $this->db_fields['id'];
    //if ( ! empty( $children_elements[ $element->$id_field ] ) ) {
        //$element->classes[] = 'has-dropdown';
    //}
    if( $depth == 0 ){
        $element->classes[] = 'top-level-item';
    }
    Walker_Nav_Menu::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
  }
}

现在顶级菜单项类中应该有“顶级项”。你可以设计它