выпадающий список, не могу понять как исправить

[ilnurgi]

привет. Делаю выпадающий список в меню. Но не могу понять из-за чего я получаю вот такое и как это исправить?

т.е. Когда я навожу мышь на Item3 появляется выпадающее меню, а Item4 съезжает вниз. но он находился то под Item1

<ul class='navigation_bar'>
<li class='nb_item'><a href=''>Item 1</a></li>
<li class='nb_item'><a href=''>Item 2</a></li>
<li class='nb_item'>
	 <a href='' onclick="alert(Python)">Item 3</a>
	 <ul class='subitem'>
		 <li><a href='' onclick="alert(1)">SubItem 1</a></li>
		 <li><a href='' onclick="alert(2)">SubItem 2</a></li>
		 <li><a href='' onclick="alert(1)">SubItem 3</a></li>
		 <li><a href='' onclick="alert(1)">SubItem 4</a></li>
	 </ul>

</li>

<li class='nb_item'><a href=''>Item 4</a></li>

</ul>

/*================
навигация
================*/
ul.navigation_bar{
	 text-decoration: none;
	 overflow: hidden;
	 position: absolute;
	 text-align: center;
}
li.nb_item{
	 display: block;
	 border: 1px solid #ddd;
	 float: left;			
	 background-color: #eee;
	 width: 240px;			
}
li.nb_item a{
	 display: block;			
	 padding: 10px;
	 color: #333;
	 text-decoration: none;
}

li.nb_item a:hover{
	 background-color: #aaa;
	 color: #eee;
}
/*================
навигация выпадающий список
================*/
ul.subitem{
	 display: none;
}

li.nb_item:hover ul.subitem{
	 display:block;
}
ul.subitem li{
	 list-style:none;
}

Edited April 12, 2013 by ilnurgi

[deadrash]

Имелось ввиду вот так? http://jsbin.com/eqiwez/1/edit

[ilnurgi]

спасибо. Да.

вот так заработало так как надо

 ul.navigation_bar{
			    text-decoration: none;
			    text-align: center;
		    }
li.nb_item:hover ul.subitem{
			    display:block;
			    position: absolute;
		    }