My navigation structure looks like this:

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

```

I want all `<li>`'s that have a subnavigation children to have a little down-arrow applied so users know this page has subpages.

Is it possible to detect in pure css if a `<li>` has children of `ul.children`? In my example above, the "Page with Subpages" should have the down arrow applied and the "Page with another subpage" as well.

Right now I'm using jquery to solve this problem:

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

```

Is there an easy pure CSS way to do so?

Thank you.