css hover menu

here is the code

<style type="text/css">

        .trigger ul {
             display: none;         
         }          .trigger:hover ul {
             display: block;         
         }     
</style> 
<h1>Coffees</h1>
<ul> 
  <li class="trigger"><span>Flat White</span>
  <ul> 
      <li><a href="javascript:;">1</a> </li>
      <li><a href="javascript:;">2</a> </li>
      <li><a href="javascript:;">3</a> </li> 
    </ul> 
  </li>
  <li class="trigger"><span>Cappuccino</span>
    <ul class="menu"> 
      <li><a href="javascript:;">View</a> </li>
      <li><a href="javascript:;">Edit</a> </li>
       <li><a href="javascript:;">Delete</a> </li> 
    </ul> 
  </li> 
</ul>