Выбор вложенных списков

Question

У меня есть панель навигации, содержащая меню, вложенное 3 раза. Таким образом, у меня есть div с id="navbar", который содержит ul, который содержит li вещь с id="menu", содержащий другой ul, содержащий более li элементов. Теперь я хочу нацелить каждый ul отдельно, чтобы добавить к нему некоторый JS-код, сделать отображение первого уровня в строке и так далее. Пока что мне удалось настроить только первый уровень, а третий, но не смог изменить свойства второго. Каким-то образом #navbar ul li идет к первому, но #navbar ul li ul li нацеливается на третье. Что я делаю не так?

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

Маленькая ошибка. Ваш второй уровень ul находятся за пределами 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 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

у Вас есть ошибка в вашем синтаксисе.

второй «ul» является не в ли, потому что вы закрываете ли перед ним. , так что попробуйте

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