How do I make submenus ?

I found a place where it said to add the code below to the Header Code but it does not work.  I want to be able to have Products and then under it have submenus like product1, product2, product3.   
<style>
.menu > li .sub-menu {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .7s;
-moz-transition: max-height .7s;
transition: max-height .7s;
}
.menu > li:hover .sub-menu {
max-height: 1000px;
}
</style>