css - 为具有下拉菜单的导航设置图标(仅使用 CSS)

Question

我有一个水平导航。一些具有下拉导航的链接。像这样:

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

如您所见，“Title 1”没有下拉菜单，但其他人都有。是否可以仅将图标应用于具有下拉菜单的链接？

Answer 1

如果你给你的主 ul 一个 Id，这可以通过以下代码实现:

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

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

这是我给链接指定颜色的示例:http://jsfiddle.net/y2XtA/