Вопросы Теги

Есть ли способ CSS добавить стрелку, если ul имеет дочерний элемент ul?

Моя структура навигации выглядит так: 

<div class="menu">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page with Subpages</a>
            <ul class="children">
                <li><a href="#">Page with another subpage</a>
                    <ul class="children">
                        <li><a href="#">subsubpage</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
</div>

Я хочу, чтобы все

  • , у которых есть дочерние элементы поднавигации, имели небольшую стрелку вниз, чтобы пользователи знали, что на этой странице есть подстраницы.

    Можно ли обнаружить в чистом CSS, если

  • имеет детей от ул. Детей ? В моем примере выше к «Странице с подстраницами» должна быть применена стрелка вниз, а также к «Странице с другой подстраницей».

    Прямо сейчас я использую jquery для решения этой проблемы: 

    $(function() {
    $('.menu a').each(function() {
        if ( $(this).parent('li').children('ul').size() > 0 ) {
            $(this).append('<span class="dwn">▼</span>');
        }           
    });
});

    Есть ли простой способ сделать это на чистом CSS?

    Спасибо.

    • 27
    задан Thom Smith 21 August 2012 в 16:31
    поделиться