如何在无序列表中选择内部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 ...这就是说我在外链接时我不想做的内心变化的行为......如果你理解我的意思..

我希望当我在内部链接上时（外链接1,2,3）和内部链接时，外面的分数应该是可见的（链接1.1,1.2,1.3） NAVMENU的屏幕曝光

上帝这令人困惑...... 请告诉我们如何专门选择内部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;
}

>运算符用于选择直接后代，因此只有当前正在悬停的div的直接子节点的li元素才会显示。有关详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

我只想更改列表项的可见性。

ul li ul li { .... }

此外，我没有看到你的＃34; navbar＆＃34; id在哪儿？既不是......