Question

以下是使用的HTML和CSS。当我将鼠标悬停在父链接上时，子菜单会完美打开。但当我在子菜单上盘旋时，它就消失了。我知道这是我的CSS导致一些问题。我尝试了一些技巧，但似乎没有用。

HTML

<div id="header_navigation">
        <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>
    </div>

CSS

#header_navigation{
    display: inline-block;
    width: 400px;
}

#header_topbar_ul li a{
    display: block;
    padding-left: 8px;
    padding-right: 8px;
}

#header_navigation #header_topbar_ul ul.submenu{
    position: absolute;
    background: #000;
    display: none;
}

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

#header_navigation > #header_topbar_ul > li > ul.submenu li{
    display: block;
    background: #000;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    padding: 5px;
    border-bottom: 1px solid #CCC;
    width: 140px;
}

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

Answer 1

在以下情况下，您将子菜单的display设置为block：

#header_navigation > #header_topbar_ul > li > a:hover + ul.submenu { display: block; background: #000; } - 当子菜单后面的链接悬停在
#header_navigation > #header_topbar_ul > li > a > ul.submenu{display: block; background: #000; } - 当一个子菜单被<a>包裹时（从未发生过）

您可能需要添加以下内容：

ul.submenu:hover {display:block; background: #000;} - 当sumbenu本身悬停在

当我将鼠标悬停在它们上时隐藏HTML子菜单

1 个答案: