Set an icon to navigations that have drop down menu (only with CSS)

Question

I have an horizontal navigation. Some links that has a drop down navigation. Something like this:

<ul>
    <li>
        <a>Title 1</a>
    </li>

    <li>
        <a>Title 2</a>
        <ul>
            <li><a>Link</a></li>
            <li><a>Link</a></li>
            <li><a>Link</a></li>
        </ul>
    </li>

    <li>
        <a>Title 3</a>
        <ul>
            <li><a>Link</a></li>
            <li><a>Link</a></li>
            <li><a>Link</a></li>
        </ul>
    </li>
</ul>

As you can see, "Title 1" not has a drop down menu but everybody else will. Is it possible to apply an icon only to links that have drop down menu?

Answer 1

If you give your main ul an Id this can be achieved by following code:

ul#nav > li > a:only-child  {
    // Do something with link without dropdown  
}

ul#nav > li > a {
    // Do something with link with dropdown    
}

Here is an example in which I gave the links a specific color: http://jsfiddle.net/y2XtA/