After some searching, I stumbled upon a helpful piece of code that might assist you. Take a look at this Fiddle: http://jsfiddle.net/3zh4jxgh/. Remember to place the jQuery code in the HEAD section of your HTML file:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#main-menu").hover(
function() {
$("#submenu").animate({
height: '+=102' /* add 51 to this number for each li class="text" in the submenu */
}, '0'
);
$(".text").css({"display": "block"
}
);
},
function() {
$("#submenu").animate({
height: '-=102', /* add 51 to this number for each li class="text" in the submenu */
}, '0'
);
$(".text").css({"display": "none"
}
);
}
);
});
</script>
This is the HTML snippet utilized in the Fiddle:
<div id="main-menu" onClick="menu()">MENU</div>
<div id="submenu">
<li class="text">A title</li>
<li class="text">Another title</li>
</div>
And here's the corresponding CSS styling:
#main-menu {
width:100%;
height:50px;
color:white;
font-family:helvetica;
position:relative;
background-color:black;
text-align:center;
line-height:50px;
cursor:pointer;
font-weight:bold;
transition: 0.5s ease-in-out;
font-size:18pt;
}
#submenu {
position:relative;
width:100%;
height:0px;
background-color:grey;
}
.text {
position:relative;
display:block;
width:100%;
height:50px;
text-align:center;
line-height:50px;
font-family:helvetica;
display:none;
color:white;
transition: 0.5s ease-in-out;
font-size:16pt;
border-bottom:1px solid #434347;
}
Just a heads up: In the Fiddle environment, I had to embed the jQuery directly into the HTML file for it to function correctly.