html - CSS 在 href 悬停时显示子菜单

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 元素相邻，因此使用相邻选择器选择 ul .submenu 悬停在 a 上。

---

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

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