Add dropdown arrow indicators to menu items that have submenus only?

Question

I am currently trying to add arrow indicators on my navigation menu for items which have submenu options.

Currently I am using this CSS:

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

But this adds a dropdown arrow to every <li> regardless of if there is a submenu or not. Is there a way with just CSS to only add this arrow to items that have sub-items?

Thanks!

You need JS/Jquery to do this...or maully add a class to the parent `li` — Paulie_D, Jan 17 '14 at 16:20
The space in `content: ' ▾';` isn't doing you any good. Use the margin or padding css properties if you want cross-browser whitespace. — Chad, Jun 20 '16 at 15:59

score 14 · Accepted Answer · answered Jan 17 '14 at 16:22

14

No. CSS has no contains child selector. You'd probably be better to just add a class to the li element. For example:

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

Your CSS selector would in turn look like:

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

You could have jQuery add the class for you, if that's an option:

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

jsFiddle Demo

answered Jan 17 '14 at 16:22

BenM

52,573
26
113
168

Nice! I prefer the ▸ char on `float: right;` though. And you might want \25B8 to escape it in CSS. – Domino Feb 17 '15 at 19:19
good but this arrow is not showing in my android device browser (chrome). Why is is so? Any suggestion? – Umar Asghar May 04 '16 at 12:59

dmpost · Answer 2 · 2020-04-15T07:12:22.367

CSS has no contains child selector. However it has various sibling selectors, only-child and not(:only-child) Since you add indicator to the anchor, use following CSS

 .mainNav li>a:not(:only-child):after {
       color: #444;
       content: ' ▾';
    }

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

score 0 · Answer 3 · answered Nov 27 '19 at 06:17

0

Yes you can without any jQuery : https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/

answered Nov 27 '19 at 06:17

Steef

569
5
21

Add dropdown arrow indicators to menu items that have submenus only?

3 Answers3