CODEWITHSUNDEEP
csshtml-lists
Vyacheslav Loginov
Vyacheslav Loginov

Reputation: 3216

css: ul li ul li height

I want to set the height for the Games menu like all the other menus, but it is not working. What is wrong?

This is my code:

<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;
}

This is the result:

enter image description here

Upvotes: 0

Views: 30841

Answers (1)

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

Problem is that li's have fixed height. So when you add second level list there is no space for them.

Change height to min-height and everything will works.

Example: http://jsfiddle.net/FJV8b/

Upvotes: 9

Related Questions