Ajouter de la flèche de menu déroulant des indicateurs pour les éléments de menu qui ont des sous-menus uniquement?

Je suis en train d'essayer d'ajouter des flèches sur mon menu de navigation pour les articles qui ont sous-menu options.

Actuellement, je suis en utilisant ce CSS:

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

Mais cela ajoute une flèche de menu déroulant pour chaque <li> peu importe si il ya un sous-menu ou pas. Est-il juste CSS de n'ajouter que cette flèche des éléments qui ont des sous-éléments?

Merci!

  • Vous avez besoin de JS/Jquery pour faire ça...ou maully ajouter une classe au parent li
  • Pas de. Le CSS n'a pas de contains child sélecteur.
  • peut-être avant d'utiliser un sélecteur au lieu d'un après un?
  • comment va l'aider?
  • que fait votre code HTML du menu ressembler?
  • L'espace dans content: ' ▾'; n'est pas à vous tout bon. L'utilisation de la marge ou de rembourrage des propriétés css si vous voulez de la croix-navigateur espaces.

InformationsquelleAutor user3101431 | 2014-01-17
  1. 10

    Pas. Le CSS n'a pas de contains child sélecteur. Vous seriez probablement mieux à il suffit d'ajouter une classe à l' li élément. Par exemple:

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

    Votre sélecteur CSS serait à son tour ressembler à:

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

    Vous pourriez avoir jQuery ajouter la classe pour vous, si c'est une option:

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

    jsFiddle Démo

    • Exactement ce que je cherchais, merci!
    • Nice! Je préfère le ▸ char sur float: right; bien. Et vous pouvez \25B8 échapper en CSS.
    • bon, mais cette flèche n'apparaît pas dans mon appareil android navigateur (chrome). Pourquoi en est ainsi? Toute suggestion?
    InformationsquelleAutor BenM
  2. 2

    CSS n'a pas de contains child sélecteur.
    Toutefois, il a diverses sibling sélecteurs, only-child et not(:only-child)
    Puisque vous ajouter un indicateur à l'ancrage, à la suite de la CSS

    CSS:

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

    HTML:

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

    tel style est utilisé dans swimbi css menu

    InformationsquelleAutor dmpost