Dodanie opcji rozwijanego menu

Cześć,

Mam menu prostej strony. Chciałbym teraz dodać rozwijane podkategorie do niektórych działów. Mają się otwierać po najechaniu myszką.

// html

 
    <div id="menu"> 
<ol> 
  
 <li><a href="#">dział 1</a></li> 
  <li><a href="#">dział 2</a></li> 
  <li><a href="#">dział 3</a></li> 
  <li><a href="#">dział 4</a></li> 
  <li><a href="#">dział 5</a></li> 
  <li><a href="#">dział 6</a></li> 
  
</ol>   
</div> 

// css

 
div#menu { 
   margin: 0 auto; 
   padding: .7em 0 .3em 0; 
   background: #8DC63F; 
   width: 100%; 
   text-align: center; 
} 

div#menu ol { 

   margin: 0; 
   padding: 0; 
} 

div#menu ol li { 
   margin: 0; 
   padding: 0; 
   display: inline; 
} 

div#menu ol a{ 
   margin: 0; 
   padding: .4em .1em .2em .6em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size: 18px; 
   color: black; 
font-family: Sansation;
} 



div#menu ol a:hover{ 
   margin: 0; 
   padding: .4em .1em .2em .6em; 
   text-decoration: none; 
   font-weight: bold; 
   font-size: 20px; 
   color: #f6f0cc; 
}

Proszę o pomoc jak dodać teraz do np. "dział 1" podkategorie.

That is elementary my dear Watson.

Temat jest tak oklepany, że nawet po polsku jest od metra tutoriali. http://kodcss.pl/kurs-css/lekcje/dzial-4/rozwijane-poziome-menu-css lub szukaj po haśle dropdown menu