Как сделать ,чтобы 1 пункт был открыт

    * { 
      margin: 1px; 
      padding: 0px; 
    } 
    nav { 
      font-family: Helvetica, Arial, sans-serif; 
      line-height: 1.5; 
      width: 200px; 
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
      -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 
    } 
    .menu-item { 
      background: #fff; 
      width: 210px; 
    } 
    .menu-item h4 { 
      color: black; 
      font-size: 15px; 
      font-weight: 500; 
      padding: 7px 12px; 
      background: grey; 
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
    } 
    .menu-item h4 a { 
      color: white; 
      display: block; 
      text-decoration: none; 
      width: 200px; 
    } 
    .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 1s 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; 
    }

<nav> 
  <div class="menu-item alpha"> 
    <h4><a href="#">Сертификация</a></h4> 
    <ul> 
      <li><a href="#">Услуги</a> 
      </li> 
      <li><a href="#">Продукция</a> 
      </li> 
      <li><a href="#">Персонал</a> 
      </li> 
    </ul> 
  </div> 
 
  <div class="menu-item"> 
    <h4><a href="#">1</a></h4> 
    <ul> 
      <li><a href="#">1</a> 
      </li> 
      <li><a href="#">2</a> 
      </li> 
      <li><a href="#">3</a> 
      </li> 
    </ul> 
  </div> 
 
  <div class="menu-item"> 
    <h4><a href="#">2</a></h4> 
 
  </div> 
 
  <div class="menu-item"> 
    <h4><a href="#">3</a></h4> 
 
  </div> 
 
  <div class="menu-item"> 
    <h4><a href="#">Аттестация</a></h4> 
 
  </div> 
 
  <div class="menu-item"> 
    <h4><a href="#">Мониторинг</a></h4> 
 
  </div> 
  <div class="menu-item"> 
    <h4><a href="#">Учебный центр</a></h4> 
 
  </div> 
  <div class="menu-item"> 
    <h4><a href="#">4</a></h4> 
 
  </div> 
  <div class="menu-item"> 
    <h4><a href="#">4</a></h4> 
 
  </div> 
  <div class="menu-item"> 
    <h4><a href="#">Нормативная база(ГОСТы)</a></h4> 
 
  </div> 
  <div class="menu-item"> 
    <h4><a href="#">5</a></h4> 
 
  </div> 
  <div class="menu-item"> 
    <h4><a href="#">Вопрос-Ответ</a></h4> 
 
  </div> 
</nav>