Selecting nested lists

Question

I have a navbar that contains a menu nested 3 times. So I have a div with id="navbar", which contains an ul, that has a li item with id="menu", that contains another ul, that contains more li items. Now I want to target every ul seperately, to add some JS code to it, make the first layer display in a row and so forth. So far I've only managed to target the first level, and the third one, but haven't been able to change properties of the second one. Somehow #navbar ul li goes to the first one, but #navbar ul li ul li targets the third. What am I doing wrong?

HTML:

<div id="navbar">
    <ul>
        <li><a href="#">IJS</a></li>
        <li class="ion-navicon-round" id="menu"></li>
            <ul>
                <li><a href="#">knjižnica</a></li>
                <li><a href="#">zaloga</a>
                    <ul>
                        <li><a href="#">novi izvodi tiskanih revij</a></li>
                        <li><a href="#">elektronske revije</a></li>
                        <li><a href="#">katalog</a></li>
                        <li><a href="#">baze podatkov</a></li>
                    </ul>
                </li>
                <li><a href="#">storitve</a>
                    <ul>        
                        <li><a href="#">medknjižnična izposoja</a></li>
                        <li><a href="#">fotokopirnica</a></li>              
                    </ul>
                </li>
            </ul>
        <li><a href="#">ENG</a></li>
    </ul>   
</div>

CSS:

#navbar {
    background-color: #913D88;
    color: #fff;
    font-size: 1.5em;
}

#navbar ul li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navbar ul li a:link, #navbar ul li a:visited {
    color: #fff;
    text-decoration: none;
}

#navbar ul li ul li {
    display: none;
}

Answer 1

Small mistake. Your second level ul are outside of li elements instead of inside.

The problem is there in the following code.

  <li class="ion-navicon-round" id="menu"></li>
                    <ul>
                        <li><a href="#">knjižnica</a></li>
                        <li><a href="#">zaloga</a>
                            <ul>
                                <li><a href="#">novi izvodi tiskanih revij</a></li>
                                <li><a href="#">elektronske revije</a></li>
                                <li><a href="#">katalog</a></li>
                                <li><a href="#">baze podatkov</a></li>
                            </ul>
                        </li>
                        <li><a href="#">storitve</a>
                            <ul>        
                                <li><a href="#">medknjižnična izposoja</a>   </li>
                                <li><a href="#">fotokopirnica</a></li>              
                            </ul>
                        </li>
                    </ul>

Should be like this.

  <li class="ion-navicon-round" id="menu">
                    <ul>
                        <li><a href="#">knjižnica</a></li>
                        <li><a href="#">zaloga</a>
                            <ul>
                                <li><a href="#">novi izvodi tiskanih revij</a></li>
                                <li><a href="#">elektronske revije</a></li>
                                <li><a href="#">katalog</a></li>
                                <li><a href="#">baze podatkov</a></li>
                            </ul>
                        </li>
                        <li><a href="#">storitve</a>
                            <ul>        
                                <li><a href="#">medknjižnična izposoja</a></li>
                                <li><a href="#">fotokopirnica</a></li>              
                            </ul>
                        </li>
                    </ul>
     </li>

DEMO

Answer 2

you have an error in your syntax.

the second "ul" is not in an li, because you close the li before it. so try

#navbar ul ul li {
    background-color: #ffff00;
}