Question

我实际上非常困难，无法解决这个问题。每当有人徘徊在链接的第一级。当前悬停菜单的第二个子菜单/子项应该出现。以下是更多信息。我经历过这种类型的问题，但在40分钟的研究和尝试来到这里之后，我现在没有脑子了。

HTML：

<ul id="header_topbar_ul">
    <?php
    global $db;
    $db->SELECT("SELECT * FROM modules WHERE modules_status='1' AND modules_show_in_menu='1' AND modules_parent_id='0' ORDER BY modules_order ASC");
    if($db->num_rows()){
        foreach($db->rows() as $menu){
            $modules_id = $menu["modules_id"];
            $modules_name = $menu["modules_name"];
            $modules_slug = $menu["modules_slug"];
    ?>
    <li id="header_<?php echo $modules_id; ?>">
        <a href="<?php echo $modules_slug; ?>" title="Dashboard"><?php echo $modules_name; ?></a>

        <?php
            $db->SELECT("SELECT * FROM modules WHERE modules_parent_id='$modules_id' AND modules_status='1' ORDER BY modules_order ASC");
            if($db->num_rows()){                    
        ?>
            <ul class="submenu">
                <?php
                    foreach($db->rows() as $submenu){
                        $modules_id = $menu["modules_id"];
                        $modules_name = $menu["modules_name"];
                        $modules_slug = $menu["modules_slug"];
                ?>
                    <li id="header_<?php echo $modules_id; ?>"><a href="<?php echo $modules_slug; ?>" title="Dashboard"><?php echo $modules_name; ?></a></li>
                <?php
                    }
                ?>
            </ul>
        <?php
            }
        ?>

    </li>

    <?php
        }
    }
    ?>
</ul>

CSS：

#header_navigation #header_topbar_ul ul.submenu{
    display: none;  
}

#header_navigation #header_topbar_ul li a:hover ul.submenu{
    display: block !important;
    background: #000;
}

Answer 1

问题在这里

#header_navigation #header_topbar_ul li a:hover ul.submenu
                                               ^

您需要+

#header_navigation #header_topbar_ul li a:hover + ul.submenu

由于ul.submenu未嵌套在a下，但它与a元素相邻，因此请使用相邻的选择器选择{{1}上的ul.submenu }}

如果你使用直接后代选择器，使你的选择器更具体，如

，那就更好了

Answer 2

使用此：

#header_navigation #header_topbar_ul li:hover ul.submenu{
    display: block !important;
    background: #000;
}

因为ul是li的孩子，当你将它悬停在li上时，ul.submenu将出现或用作@AlAlien说。

CSS显示子菜单悬停在href上

2 个答案: