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

检查工作demo

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');

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

3 个答案: