HTML And CSS: On Hover Display Div

I'm trying to get it so that when someone hovers over a div box it will display a separate div box below it. How would I go about doing this? HTML:

Solution 1:

If you change your HTML as follows

<div id="product1">
  <div id="product1hover"></div>
</div>

The following css will do

#product1hover{
  display:none;
}
#product1:hover #product1hover{
  display:block;
}

Update

With your existing HTMLyou can achieve this as follows:

#product1hover{
 display:none;
}
#product1:hover + #product1hover{
 display:block;
}