<nav>
        <div class="menu-item alpha">
          <h4><a href="#">Main Page</a></h4>
        </div>
        <div class="menu-item menu1">
          <h4><a href="#">Menu 2</a></h4>
          <ul>
            <li><a href="#">Menu 2.2</a></li>
            <li><a href="#">Menu 2.3</a></li>
            <li><a href="#">Menu 2.3</a></li>
            <li><a href="#">Menu 2.4</a></li>
            <li><a href="#">Menu 2.5</a></li>
            <li><a href="#">Menu 2.6</a></li>
          </ul>
        </div>
        <div class="menu-item menu2">
          <h4><a href="#">Menu 3</a></h4>
          <ul>
            <li><a href="#">Menu 3.1</a></li>
            <li><a href="#">Menu 3.2</a></li>
            <li><a href="#">Menu 3.3</a></li>
            <li><a href="#">Menu 3.4</a></li>
            <li><a href="#">Menu 3.5</a></li>
          </ul>
        </div>
        <div class="menu-item">
          <h4><a href="#">Menu 4</a></h4>
        </div>
        <div class="menu-item menu3">
          <h4><a href="#">Menu 5</a></h4>
          <ul>
            <li><a href="#">Menu 5.1</a></li>
            <li><a href="#">Menu 5.2</a></li>
          </ul>
        </div>
        <div class="menu-item">
          <h4><a href="#">Menu 6</a></h4>
        </div>
        <div class="menu-item beta">
          <h4><a href="#">Contacts</a></h4>
        </div>
      </nav><!-- End Nav -->

nav {
  background-color: #dcf0c9;
  width: 200px;
  margin: 10px auto;
  border-radius: 10px;
}
.menu-item h4 {
  font-size: 15px;
  font-weight: bold;
  padding: 7px 12px;
  background: #dcf0c;
  text-align: left;
  margin: 0;
}
.menu-item h4 a {
  color: #000;
  display: block;
  text-decoration: none;
  width: 200px;
}
.menu-item h4:hover {
  background: #8bda7f;
}
.menu-item.alpha h4:hover {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.menu-item.beta h4:hover {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.menu-item ul {
  background: #dcf0c9;
  font-size: 14px;
  line-height: 1.6em;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  margin: 0;
  height: 0;
  -webkit-transition: height 1s ease;
  -moz-transition: height 1s ease;
  -o-transition: height 1s ease;
  -ms-transition: height 1s ease;
  transition: height 1s ease;
}
.menu-item.menu1:hover ul {
  height: 115px;
}
.menu-item.menu2:hover ul {
  height: 115px;
}
.menu-item.menu3:hover ul {
  height: 45px;
}
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;
  text-align: left;
}
.menu-item li {
  border-bottom: 1px solid #eee;
}
 .menu-item li:hover {
  background: #8bda7f;
}