将鼠标悬停在父菜单项中时如何打开子菜单

Question

我正在开发wp主题并进行导航编码。 一切看起来都不错，但是当我将鼠标悬停在菜单项上时，它不会打开子菜单。 我认为我的CSS编码有问题。 请你帮助我好吗。

 .f-nav .menu { background-color: hotpink; list-style: none; display: flex; margin-right: 1rem; color: white; > .menu-item { margin: 0; > a { padding: 1rem; border-bottom: none; display: block; color: #fff; border-left: 1px solid #222; } &:hover a, &.open > a { background: #fff; color: #000; } > .sub-menu { position: absolute; margin: 0; list-style: none; background: #fff; display: none; min-width: 200px; border: 1px solid #efefef; border-top-color: #fff; z-index: 10; } } nav { position: relative; } .current-menu-item { background-color: red; } .menu-item-home { background-color: blue; } } 

Answer 1

只需确保将鼠标悬停在屏幕上即可显示它：添加到代码中：

&:hover a, &.open > a {
        background: #fff;
        color: #000;
    .sub-menu { display: block} /* <-- Add this line*/
    }

Answer 2

您需要在菜单项中添加到悬停CSS

> .menu-item {
  &:hover {
    > .sub-menu {
       display: block;
    }
  }
}

检查工作演示

Answer 3

这是标记

 <nav class="f-nav" role="navigation"> <?php wp_nav_menu(array( 'theme_location' => 'footer-menu' )); ?> </nav> 

这是navigation.php

 <?php function _testcopy_register_menus() { register_nav_menus(array( 'main-menu' => esc_html__('My Primary Menu', '_testcopy'), 'footer-menu' => esc_html__('My Footer Menu', '_testcopy'), )); } add_action('init','_testcopy_register_menus');