Question

我目前正尝试在导航菜单上为包含子菜单选项的项目添加箭头指示器。

目前我正在使用这个CSS：

.mainNav li > a:after {
   color: #444;
   content: ' ▾';
}

但是，无论是否存在子菜单，这都会向每个<li>添加一个下拉箭头。有没有办法只用CSS才能将此箭头添加到包含子项的项目中？

谢谢！

Answer 1

没有。 CSS没有contains child选择器。你可能最好只在li元素中添加一个类。例如：

<li class="has-child">
    <a href="#">The Link</a>
    <ul class="child">
        <li>Child 1</li>
    </ul>
</li>

您的CSS选择器将依次为：

.mainNav li.has-child > a:after {
   color: #444;
   content: ' ▾';
}

如果这是一个选项，你可以让jQuery为你添加这个类：

$('.mainNav li:has(ul)').addClass('has-child');

jsFiddle Demo

Answer 2

CSS没有contains child选择器。但是它有sibling个only-child选择器，not(:only-child)和.mainNav li>a:not(:only-child):after { color: #444; content: ' ▾'; } 由于您向锚点添加指示符，请使用以下CSS

<div class="mainNav">
    <li>
        <a href="#">The item with child</a>
        <ul class="child">
            <li>Child 1</li>
        </ul>
    </li>
    <li>
        <a href="#">No child item</a>
    </li>
</div>

int

swimbi css menu

中使用了这种风格

Answer 3

是的，您可以不使用任何jQuery：https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/

将下拉箭头指示符添加到仅包含子菜单的菜单项？

3 个答案: