Menù a tendina non si sovrappone ad un input!

[lore83]

Ciao.

Il mio menù a discesa fatto con i css si sovrappone correttamente al div (orange_bar) ma non si sovrappone all'input in esso contenuto...come si fa a far stare l'input al di sotto del menù a discesa?

<div id="container">

<div id="top_menu" class="navigation_bar">
<ul class="dropdownmenu">

<li class="headlink">[url="***"]Pippo[/url]

<ul class="submenu">[*][url="***"]1[/url][*][url="***"]2[/url][*][url="***"]3[/url][/list]


[/list]
</div>

<div id="orange_bar">
<div style="margin: 0 auto;width:100%;">
<input style="height:20px;width:500px;" />
<button style="margin-left:20px;" "class="button">Cerca!</button>
</div>
</div>

</div> 

CSS

div#container{
    width:1050px;
    margin: 0 auto;
    z-index:-1;
    }

div#top_menu{
    float:right;
    margin-top:20px;
    }

.navigation_bar{
    height:36px;
        }

.navigation_bar ul{
    background-color:#F9F9F9;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    }

ul.dropdownmenu{
    height:36px;
    }
    
ul.dropdownmenu li{
    width:100px;
    }

li.headlink{
    float:left;
    height:36px;
    }
    
ul.submenu{
    text-align:left;
    float:left;
    display:none;
    margin:0;
    padding:0;
    margin:0 0 0 -1px;
    }

ul.submenu li{
    width:100px;
    }
    
li.headlink a {
    display:block;
    padding:10px;
    height:16px;
    }

#orange_bar{
    clear:both;
    background:orange;
    height:55px;
    z-index:-1;
    }