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

我正在尝试创建带有标记的导航菜单，如下所示：

<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>

现在，当我将鼠标悬停在链接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 ...当我在外部链接上悬停时要说的我不想的内在变化的行为...如果您理解我的意思..

我想在悬停在外部链接（链接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

最佳答案

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

#navbar div {
  display: none;
}

您可以在容器LI悬停时使它们可见：

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

>运算符用于选择直接后代，因此在这里，仅是当前正在悬停的div的直接子节点的li元素。有关更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors