Konrad the n00b Konrad the n00b - 2 months ago 10
CSS Question

Color odd lines in menu css

I have a menu with a dropdown where i would like to have different colors on odd lines and applying css to achieve this.
so first line and third line is the same color and the second and fourth are another color.

this is my menu:

<ul class="nav navbar-nav">
<li><a title="home">home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">option <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a title="option1">option1</a></li>
<li><a title="option2">option2</a></li>
<li><a title="option3">option3</a></li>
<li><a title="option4">option4</a></li>
</ul>
</li>
</ul>


i have added oddChild class to every odd line which is color the line..but I would like to do something like

.dropdown-menu < odd {
background-color: white;
}


Is this possible?

Answer

nth-child makes this easy...

.dropdown-menu li:nth-child(2n) or .dropdown-menu li:nth-child(odd)

.dropdown-menu li:nth-child(2n) { background: #a00; }
<ul class="nav navbar-nav">
                    <li><a title="home">home</a></li>

                    <li class="dropdown">
                                       <a href="#" class="dropdown-toggle" data-toggle="dropdown">option <b class="caret"></b></a>
                                       <ul class="dropdown-menu">
                                                       <li><a title="option1">option1</a></li>
                                                       <li><a title="option2">option2</a></li>
                                                       <li><a title="option3">option3</a></li>
                                                       <li><a title="option4">option4</a></li>
                                       </ul>
                    </li>
</ul>