0

我正在尝试使用如下标记创建导航菜单：

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

2 回答 2

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

于 2013-08-27T09:57:33.803 回答
0

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

ul li ul li { .... }

此外，我在任何地方都看不到您的“导航栏”ID？既不是..

于 2013-08-27T09:59:09.790 回答