CSS扩展导航问题

Question

We have some how managed to put out a css expandable navigation stuff... the problem what i am facing is you can see by mouse over on Home its expanding but you will also see that the last menu is blank... As well when you see the Portfolio mouse over you will see there are 3 menus only buy actually there are 5...

Ultimately what i want is what ever the total number of sub menus we provide may be 10 or 5 or 3 or even 2 the main menu should expand and show the same.

Can you please help with the issue...

HTML Code

<div class="nav">
        <div class="menu-item alpha">
          <h4><a href="#">User Managment</a></h4>
          <ul>
            <li><a href="#">View Users</a></li>
            <li><a href="#">Edit User</a></li>
          </ul>
        </div>

        <div class="menu-item">
          <h4><a href="#">Portfolio</a></h4>
          <ul>
            <li><a href="#">Web</a></li>
            <li><a href="#">Print</a></li>
            <li><a href="#">Other</a></li>
            <li><a href="#">Other</a></li>
            <li><a href="#">Other</a></li>
            <li><a href="#">Other</a></li>
          </ul>
        </div>

        <div class="menu-item">
          <h4><a href="#">About</a></h4>
          <ul>
            <li><a href="#">History</a></li>
            <li><a href="#">Meet The Owners</a></li>
            <li><a href="#">Awards</a></li>
          </ul>
        </div>

        <div class="menu-item">
          <h4><a href="#">Contact</a></h4>
          <ul>
            <li><a href="#">Phone</a></li>
            <li><a href="#">Email</a></li>
            <li><a href="#">Location</a></li>
          </ul>
        </div>
    </div>

CSS Code As Follows

 .nav * {
  margin: 0px;
  padding: 0px;
}

.nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.menu-item {
  background: #fff;
  width: 200px; 
}

/*Menu Header Styles*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;

  /*Gradient*/
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.menu-item h4:hover {  
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

}

.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 200px;
}

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;

  /*Animation*/
  -webkit-transition: height 2s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}


.menu-item:hover ul {
  height: 93px;

}

.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 200px;
}

/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}

.menu-item li:hover {
  background: #eee;
}

/*First Item Styles*/
.alpha p {
    padding: 8px 12px;
    color: #aaa;
}

.alpha p a {
    color: #aaa;
    font-style: italic;
}

.alpha p a:hover {
    color: #ccc;
}

Answer 1

Try to change .menu-item:hover ul class height to auto , you are limiting it to height as 93px . so remaining links were hidden

.menu-item:hover ul {
  height: auto;

}

Updated demo :

CSS:

.menu-item ul {     
  max-height: 0px;  

  /*Animation*/
  -webkit-transition: max-height 2s ease;
     -moz-transition: max-height 1s ease;
       -o-transition: max-height 1s ease;
      -ms-transition: max-height 1s ease;
          transition: max-height 1s ease;
}


.menu-item:hover ul {
  max-height: 1000px;

}

Answer 2

add the following and it should work as desired, basically you will need the height in pixels for the animation to continue to work so setting it to auto will disrupt the animation. Here in the code below I have considered a height of 31px per item in the menu

.menu-item:hover ul {
  height: 93px;

}

.menu-item:nth-child(1):hover ul {
  height: 63px;

}

.menu-item:nth-child(2):hover ul {
  height: 155px;

}