Border autout d'une div

Bonjour, j'ai créé une div avec à l'intérieur, un menu composé de ul et de li mais malheureusement, à l'affichage, mon menu se retrouve en dessous de ma div.

Voici ce que j'obtiens:
http://nsa21.casimages.com/img/2011/10/13/111013055737609148.png

Et voici mon code html:

<div id="menu"> 
  <ul> 
   <li><a id="menu_1" onclick='displayPage("films")'>Films</a></li> 
    
   <li><a id="menu_2"onclick='displayPage("infos")'>Infos</a></li> 
    
   <li><a id="menu_3"onclick='displayPage("historiques")'>Historiques</a></li> 
  </ul> 
</div> 

Et enfin mon fichier css:

#menu 
{ 
 width: 510px; 
 height: 30px; 
 float: right; 
 border: 2px solid #333; 
 margin-top:30px;  
} 

#menu ul 
{ 
 padding:0; 
  margin:0; 
  list-style-type:none; 
    text-align: center ;  
} 

#menu li 
{ 
 float:left; /*pour IE*/ 
 margin-right:25px; 
 margin-top: 80px; 
 font-size: 13px; 
 font-weight: normal; 
} 

#menu li a 
{ 
 text-decoration:none; 
 color: #333; 
 cursor: pointer; 
} 

#menu li a:hover 
{ 
 color:#333; 
 background-color:#C6C7C7; 
} 

Qu'est-ce qui ne va pas svp?