Question

我有以下菜单，当我使用下面的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>

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

Answer 2

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

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

Demo

在上面的选择器中，选择直接嵌套在第一个和第二个a下的li，它们进一步嵌套到ul，它进一步嵌套在.nav

Answer 3

使用纯css执行此操作的唯一方法是将箭头放在“subnav”容器中。但你可以轻松地使用jquery做到这一点。

if ($(".nav li .subnav").length > 0)) {
    // .. set background
}

Answer 4

据我所知，单靠CSS是不可能的。您最好的选择是为<li>个.subnav个孩子添加一个班级。

Answer 5

因为您无法在CSS中创建if语句，您需要使用javascript / jQuery添加它，或者获得创意......

我建议使用伪元素（或实际HTML元素）在<{strong> .subnav项目中创建向下箭头，然后将其绝对定位在.subnav之外，以便它出现在父项目中。

通过执行此操作，仅当子空存在时才会显示箭头。但是，您必须使用.subnav显示/隐藏的方式，因为设置display:none;显然也会导致箭头不显示。

Answer 6

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

如何在.subnav班级上展示图片呢？将它放在顶部中心而不是li的底部中心。

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

使用CSS检测子项是否存在

6 个答案: