更改单个顶部栏项目的背景及其下拉列表

时间:2014-09-29 18:42:27

标签: css css-selectors zurb-foundation

我有一个顶栏导航,需要一个项目,其下拉列表与其余项目具有不同的背景颜色。我已设法更改项目的背景颜色,但无法更改其下拉列表。我已经想出了如何更改所有项目的下拉菜单,我尝试了所有不同的变化,以使这个单项工作,但没有任何作用。

有人可以帮忙吗?

为了澄清,我正在尝试选择ID为帐户的右侧和 top-bar-color 类的下拉列表。感谢

注意:我正在使用基础5.我最初在标题中有这些信息,但有人删除了它,不知道为什么:/

.top-bar-section .top-bar-colour  {background-color:red} //this works
.top-bar-section .dropdown li a {background-color:red} //this doesn't as it changes all dropdowns 
.top-bar-section li a.top-bar-colour .dropdown  li a  { background-color:red} //this doesn't work either

<nav class="top-bar" data-topbar >
                    <ul class="title-area">
                        <!-- Title Area -->
                        <li class="name">&nbsp;</li>
                        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
                    </ul>
                    <section class="top-bar-section">
                        <!-- main nav section -->
                        <ul class="left">
                            <li><a href="#"><i class="fi-home medium"></a></i></li>
                            <li class="has-dropdown">
                                <a href="#">menu</a>
                                <ul class="dropdown">
                                    <li><a href="#" class="">Dropdown Level 1</a></li>
                                    <li><a href="#">Dropdown Option</a></li>
                                    <li><a href="#">Dropdown Option</a></li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="right">
                            <li class="has-dropdown" id="account">
                                <a href="#" class="top-bar-colour"><i class="fi-torso medium"></i></a>
                                <ul class="dropdown"><li><a href="#">Login</a></li></ul> 
                            </li>
                        </ul>
                    </section>
                </nav>

1 个答案:

答案 0 :(得分:0)

假设您想要更改条形图的颜色并下拉第一条颜色,您可以使用此css

.top-bar-section .left .dropdown li a {background-color:red} 

让我知道我的假设是否正确