css: ul li ul li height

Question

Я хочу установить высоту для меню «Игры», как и для всех других меню, но она не работает.Что не так?

Это мой код:

<ul class="menu">
   <li class="item-474 current active"><a href="/">News</a></li>
   <li class="item-482 deeper parent">
      <span class="separator">Applications</span>
      <ul>
         <li class="item-483"><a href="games.html">Games</a></li>
      </ul>
   </li>
   <li class="item-484"><span class="separator">Appearence</span></li>
</ul>

#left-menu ul.menu {
  display: block;
  list-style-type: none;
  margin-left: -40px;
}

#left-menu ul.menu li {
  display: block;
  text-align: center; 
  background: url("img/menu1.png");
  width: 208px;
  height: 31px;
  text-align: center;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#left-menu ul.menu li ul li {
  display: block;
  text-align: center; 
  background: url("img/menu2.png");
  width: 208px;
  height: 31px;
  text-align: center;
  list-style-type: none;
}

Это результат:

Answer 1

Проблема в том, что li имеют фиксированную высоту. Поэтому, когда вы добавляете список второго уровня, для них нет места.

Измените высоту на минимальную высоту, и все будет работать.

Пример: http://jsfiddle.net/FJV8b/