Question

我使用多维数组中的值创建一个纯CSS的下拉菜单。菜单设置为水平，子页面垂直，然后子页面垂直于子页面的右侧。希望你知道我的意思..

现在我的子菜单工作正常，但是我在定位子菜单时遇到了困难（我正在使用三层）我希望第三个菜单只在子菜单中出现item有子页面。为此，我将一个类添加到锚中，如果它是真的。到目前为止没问题，它正确设置了类。然而，在我的CSS中，我得到了显示第3层：

#navcontainer ul li ul.submenu li a.hasSub:hover > ul.submenu2
{
display: list-item;
}

但它没有用。

要显示第2层，我有这个：

#navcontainer ul li:hover > ul.submenu
{
display: list-item;
}

那就是工作。

索引文件如下所示:(我知道它有点混乱我知道..）

<div id="navcontainer">
    <!--MAIN MENU-->
    <ul>
    <?php
    foreach ($aMenu as $page){ ?>
        <li>
            <a href="<?php echo $page['url']; ?>"><?php echo $page['name']; ?></a>
            <!--CHECKS IF LIST ITEM HAS SUB PAGES-->
            <?php if(isset($page['subpages'])){ ?>
                <ul class="submenu">
                    <li>
                    <?php foreach ($page['subpages'] as $subpage){ ?>
                        <?php if(isset($subpage['subpages'])){ ?>
                            <a class="hasSub" href="<?php echo $subpage['url']; ?>"><?php echo $subpage['name']; ?></a> <?php
                        } else { ?>
                            <a href="<?php echo $subpage['url']; ?>"><?php echo $subpage['name']; ?></a> <?php
                        }?>
                        <!--CHECKS IF SUB-LIST ITEM HAS SUB PAGES-->
                        <?php if(isset($subpage['subpages'])){ ?>
                            <ul class="submenu2">
                                <li>
                                <?php foreach ($subpage['subpages'] as $subpage){ ?>
                                    <a href="<?php echo $subpage['url']; ?>"><?php echo $subpage['name']; ?></a>
                                <?php } ?>
                                </li>
                            </ul>
                        <?php } ?>
                    <?php } ?>
                    </li>
                </ul>
            <?php } ?>
        </li>
        <?php
    } ?>
    </ul>
</div>

现在，如果我改为：

#navcontainer ul li ul.submenu li:hover > ul.submenu2
{
display: list-item;
}

它会显示第三个菜单，但无论我将哪个菜单悬停，它都会显示。

我的其他CSS：

#navcontainer ul
{
list-style-type: none;
position: relative;
display: inline-table;
}

#navcontainer ul:after 
{
clear: both; 
display: block;
}

#navcontainer ul li 
{ 
float: left; 
}

#navcontainer ul ul
{ 
display: none;
position: absolute;
top: 100%;
padding: 0;
}

#navcontainer ul ul ul 
{
display: none;
position: absolute;
left: 100%; 
top: 0;
}

Answer 1

你在顶部的第一次尝试不起作用，因为你有 a.hasSub：hover＆gt; ul.submenu2 ，子菜单不是链接的子节点（它是li的子节点）。

此外，您的选择器似乎不必要地复杂。另外我不清楚你为什么使用display：list-item。

无论如何，或多或少相当于上面的内容：

#navcontainer li:hover > .submenu,
#navcontainer li:hover > .submenu2 {
    display: list-item;
}

换句话说，只要将鼠标悬停在其中包含子菜单的列表项上，就打开该子菜单。

如果用于隐藏子菜单的CSS与上面显示的一样复杂，那么上面的内容可能需要更加具体，以便优先使用。

Answer 2

我通过查看此主题中接受的答案解决了我的问题： Pure CSS multi-level drop-down menu

CSS子菜单锚悬停问题

2 个答案: