2

我有以下菜单，当我使用下面的 CSS 时，它下面会出现一个小箭头，但我只想在有礼物时li出现箭头.subnav

CSS

.nav li: hover {
    background: url(.. / img / template / nav - hover.png) no - repeat bottom center;
}

HTML

<div class="nav">
    <ul>
        <li><a href="#">Services</a>

            <div class="subnav">
                <ul>
                    <li><a href="#">menu item</a>
                    </li>
                    <li><a href="#">menu item</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/companies">Companies</a>

            <div class="subnav">
                <ul class="companylist1">
                    <li><a href="#">1</a>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/locations">Locations</a>
        </li>
        <li><a href="/news">News</a>
        </li>
        <li><a href="/contact">Contact</a>
        </li>
    </ul>
</div>
4

6 回答 6

1

到目前为止，您可以实现此目的的唯一方法是使用nth-of-type

.nav > ul > li:nth-of-type(1) > a, .nav > ul > li:nth-of-type(2) > a {
    color: #f00;
}

演示

在上面的选择器中，选择a的是直接嵌套在 1st 和 2nd 下li的哪个进一步嵌套到ul哪个进一步嵌套在.nav

于 2013-08-28T08:30:37.213 回答
1

如果 div.subnav 将具有绝对位置，只需将其放在锚点之前：

<li>
    <div class="subnav">
        <ul class="companylist1">
            <li>
                <a href="#">1</a>
            </li>
            <li>
                <a href="#">2</a>
            </li>
        </ul>
    </div>
    <a href="/companies">Companies</a>
</li>

接着：

div.subnav + a {...}

或者：

div.subnav + a:hover {...}

http://jsfiddle.net/coma/2ZBnY/

于 2013-08-28T08:26:20.200 回答
0

使用纯 css 做到这一点的唯一方法是将箭头放在“subnav”容器中。但是你可以很容易地用 jquery 做到这一点。

if ($(".nav li .subnav").length > 0)) {
    // .. set background
}
于 2013-08-28T08:25:04.460 回答
0

据我所知，仅靠 CSS 是不可能的。你最好的办法是在有孩子的两个<li>s中添加一个类。.subnav

于 2013-08-28T08:25:08.623 回答
0

因为你不能if在 CSS 中创建语句，你要么需要用 javascript/jQuery 添加它，要么发挥创意......

我建议在项目中创建带有伪元素（或实际 HTML 元素）的向下箭头，.subnav然后将其绝对定位在 .subnav 之外，以便它看起来在父 li 项目内。

通过这样做，只有在 subnav 存在时才会显示箭头。但是，您必须尝试显示/隐藏 .subnav 的方式，因为设置display:none;显然也会导致箭头不出现。

于 2013-08-28T08:25:56.933 回答
0

您不能在 CSS 中创建条件，但是您可以以不同的方式工作。

.subnav在课堂上显示图像怎么样？把它放在顶部中心而不是底部中心li。

选择器类似于.nav li > .subnav:hover图像。

于 2013-08-28T08:26:16.020 回答