Jquery-tab abnormally block my div - css

Question

I am facing the problem that the jquery-tab block my Main menu class="oe_wrapper" that is located on the nav bar id="NavBar". I want the oe_menu can overlay the tabs. Is there any problem with this code? thanks in advance.
http://jsfiddle.net/Sp7Mk/
mark-up:
<div id="NavBar" style="width: 500px; height: 100px; background-color: blue;">
<div class="oe_wrapper" style="background-color: red;">
<ul id="oe_menu" class="oe_menu">
<li>
Main Menu
<div>
<ul>
<li class="oe_heading">
My Account
</li>
<li>Account Information</li>
</ul>
<ul>
<li class="oe_heading">
Forms
</li>
<li>F-1</li>
<li>F-2</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="searchTab">
<ul>
<li>Address</li>
<li>Other</li>
<li>Disabled</li>
</ul>
<div id="tabsAddll">
<p>Address</p>
</div>
<div id="tabsOther">
<p>Other</p>
</div>
<div id="tabsDis">
<p>Disabled</p>
</div>
</div>
js:
$(document).ready(function(){
$( "#searchTab" ).tabs({ disabled: [ 2 ] });
});
css:
*{ margin: 0 auto;}
body {
background:#000000;
}
ul.oe_menu{
list-style:none;
position:relative;
float:right;
clear:both;
left: -400px;
}
ul.oe_menu > li{
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li > a{
display:block;
background-color:#717171;
color:#ffffff;
text-decoration:none;
font-weight:bold;
font-size:12px;
/* a link */
width:90px;
height:16px;
padding:1.3px;
margin:1px;
text-shadow:0px 0px 1px #000;
/*opacity:0.8;*/
text-align: center !important;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
position:absolute;
left:1px;
background:#fff;
width:668px;
padding:30px;
}
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul.oe_full{
width:100%;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
text-align: left;
}
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
width: 150px;
text-align: left;
}

Answer 1

In the line
<div id="NavBar" style="width: 500px; height: 100px; background-color: blue;">
You are explicitly declaring a height for the navbar of 100px, so after 100px it's space in the DOM ends and the next element starts to render. Try changing the height to 175px, for me that put it right underneath your other menu.