Вася Задунайский,
<html lang="en">
<body>
<style>
.elem{
width:12%;
height:50px;
background-color: red;
display: inline-block;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.open{
height: 0px;
background-color: aqua;
text-align: center;
line-height: 150px;
overflow: hidden;
transition: all 1s;
}
.height{
height:150px;
border: 1px solid red;
text-align: center;
line-height: 150px;
}
</style>
<div class="elem" id="elemMenu1">1</div>
<div class="elem" id="elemMenu2">2</div>
<div class="elem" id="elemMenu3">3</div>
<div class="elem" id="elemMenu4">4</div>
<div class="elem" id="elemMenu5">5</div>
<div class="elem" id="elemMenu6">6</div>
<div class="elem" id="elemMenu7">7</div>
<div class="elem" id="elemMenu8">8</div>
<div class="open" id="opener1">1</div>
<div class="open" id="opener2">2</div>
<div class="open" id="opener3">3</div>
<div class="open" id="opener4">4</div>
<div class="open" id="opener5">5</div>
<div class="open" id="opener6">6</div>
<div class="open" id="opener7">7</div>
<div class="open" id="opener8">8</div>
<script>
(function () {
var open = document.querySelectorAll("div.open");
var elem = document.querySelectorAll("div.elem");
[].forEach.call(elem, function(item, i) {
item.addEventListener('mouseover', function() {
open[i].classList.add("height");
});
item.addEventListener('mouseout', function() {
open[i].classList.remove("height");
});
open[i].addEventListener('mouseover', function() {
open[i].classList.add("height");
});
open[i].addEventListener('mouseout', function() {
open[i].classList.remove("height");
});
});
}());
</script>
</body>
</html>