Iframe z-index de menu Déroulant

J'ai le code d'un menu déroulant, et mon but est de charger ce code via une iFrame. Malheureusement, je ne pouvais pas comprendre comment charger de l'affichage des éléments à l'extérieur de l'iFrame en utilisant le Z-index. Le code est comme suit:

 <style type="text/css">
/*Initialize*/
ul#menu, ul#menu ul.sub-menu 
{
padding:0;
margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li 
{
list-style-type: none;
display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a 
{
text-decoration: none;
color: #fff;
background: #666;
padding: 5px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li 
{
position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu 
{
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu li:hover ul.sub-menu
{
display:block;
}
</style>
<ul id="menu">
<li>
<a href="#">Menu 1</a>
</li>
<li>
<a href="#">Menu 2</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li><a href="#">Menu 3</a>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<li>
<a href="#">Sub Menu 1</a>
</li>
<li>
<a href="#">Sub Menu 2</a>
</li>
<li>
<a href="#">Sub Menu 3</a>
</li>
<li>
<a href="#">Sub Menu 4</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 5</a>
</li>
</ul>
I have written the code for i frame. The drop down menu is in "test.html"
<iframe src="test.html" width="500" height="30"></iframe>
so i want load this  css drop down menu in a iframe but the list view should come out of the iframe so how to do it , Please help me .