Есть следующее меню:
* {
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>
Помогите сделать так, чтобы при загрузке 1 меню было открытым.