html - 如何在无序列表中选择内部div

Question

我正在尝试创建一个带有如下标记的导航菜单:

<ul id="ul1">
        <li><a href="#">Link 1</a>
            **<div>**
                <p>SOME STUFF</p>
                <ul>
                    <li><a href="#">Link 1.1</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.2</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.3</a><**div** class="innerdiv"></div></li>
                    <li><a href="#">Link 1.4</a><**div** class="innerdiv"></div></li>
                </ul>
            </div>
        </li>
        .
        .(WITH MORE <LI>'S OFC :))
        .
</ul>

现在，当我将鼠标悬停在 Link 1 上时，我想让外部 div 可见...这很容易使用 CSS 完成:

#navbar ul li div
{
    min-width:500px;
    min-height:130px;
    background-color:#dfdfdf;
    position:absolute;
    left:0px;
    top:32px;
    visibility:hidden;
}

#navbar ul li:hover div
{
    visibility:visible;
}

接下来，我希望只有当我将鼠标悬停在链接 1.1、1.2 等内部链接上时，内部 div 才可见。这导致了问题，因为我正在使用 #(id)-selector 将 #navbar 作为基本 ID，这导致内部 div 从外部 div 继承 css ...也就是说，当我悬停在外部链接上时内部 DIV 的行为也发生了我不想要的变化......如果你明白我的意思......

我希望当我将鼠标悬停在外部链接(链接 1、2、3)上时，外部 DIV 应该是可见的，而当我将鼠标悬停在内部链接(链接 1.1、1.2、1.3)上时，内部 DIV 应该是可见的导航菜单的屏幕截图

天哪，这令人困惑...请在这方面提供帮助，告诉您如何具体选择内部 div，或者告诉您使用 JS 或 Jquery 的解决方法……目前我正在使用选择器

#navbar ul li div ul li div , and
#navbar ul li div ul li a:hover div

Answer 1

如果您的 div 最初没有显示:

#navbar div {
  display: none;
}

当容器 LI 悬停时，您可以使它们可见:

#navbar li:hover > div {
  display: block;
}

> 运算符用于选择直接后代，因此这里只选择作为 li 的直接子节点的 div 元素，即当前悬停的将变得可见。更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors