2

I prepare my mobile menu with SlickNav but I have a little problem. I can not specify my css attributes on my <li> beacause SlickNav not taken into account. The problem is that I simply want to change the background of each of my <li>

Any idea?

<ul id="menu2">
<li>Parent 1
    <ul>
        <li><a href="#">item 3</a></li>
        <li>Parent 3
            <ul>
                <li><a href="#">item 8</a></li>
                <li><a href="#">item 9</a></li>
                <li><a href="#">item 10</a></li>
            </ul>
        </li>
        <li><a href="#">item 4</a></li>
    </ul>
</li>
<li><a href="#">item 1</a></li>
<li>non-link item</li>
<li>Parent 2
    <ul>
        <li><a href="#">item 5</a></li>
        <li><a href="#">item 6</a></li>
        <li><a href="#">item 7</a></li>
    </ul>
</li>

angelilo_
  • 143
  • 9

1 Answers1

1

I think you can use CSS3 :nth-child() Selector, like this:

ul:nth-child(1) { // first li
    background-color: #ff0000;
}
ul:nth-child(2) { // second li
    background-color: #ffffff;
}
kitz
  • 879
  • 2
  • 9
  • 24
  • Thank kitz for this solution but it seems to me that it is poorly supported in ios8, I'll try anyway – angelilo_ Sep 25 '15 at 12:57
  • Welcome! Also, you can assign a class to each li, and apply background-color changes in each class. – kitz Sep 25 '15 at 13:03
  • When Slickmenu is in action, it crushes the added classes ... I tried your solution, the problem is that the background also apply to the sub menus :( – angelilo_ Sep 25 '15 at 13:07
  • I did not know you have sub menus. I think you need to handle it specially. You can try like this: ul:nth-child(2) > ul { background-color: 'your_default_color' }. Assuming yout second li is a sub menu and your sub menu is an ul. – kitz Sep 25 '15 at 13:16