title: Jquery-tab abnormally block my div
body: <p>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.</p>
  
  <p><a href="http://jsfiddle.net/Sp7Mk/" rel="nofollow">http://jsfiddle.net/Sp7Mk/</a></p>
  
  <p>mark-up:</p>
  
  <pre><code>&lt;div id="NavBar" style="width: 500px; height: 100px; background-color: blue;"&gt;
    &lt;div class="oe_wrapper" style="background-color: red;"&gt;
                  &lt;ul id="oe_menu" class="oe_menu"&gt;
                      &lt;li&gt;
                          &lt;a href=""&gt;Main Menu&lt;/a&gt;
                          &lt;div&gt;
                              &lt;ul&gt;
                                  &lt;li class="oe_heading"&gt;
                                      My Account
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Account Information&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;ul&gt;
                                  &lt;li class="oe_heading"&gt;
                                      Forms
                                  &lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;F-1&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;F-2&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="searchTab"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#tabsAddll"&gt;Address&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#tabsOther"&gt;Other&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabsDis"&gt;Disabled&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div id="tabsAddll"&gt;
                  &lt;p&gt;Address&lt;/p&gt;
              &lt;/div&gt;
              &lt;div id="tabsOther"&gt;
                  &lt;p&gt;Other&lt;/p&gt;
              &lt;/div&gt;
          &lt;div id="tabsDis"&gt;
                  &lt;p&gt;Disabled&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$(document).ready(function(){
          $( "#searchTab" ).tabs({ disabled: [ 2 ] });
      });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>*{ margin: 0 auto;}
  body {
      background:#000000; 
  }
  ul.oe_menu{
      list-style:none;
      position:relative;
      float:right;
      clear:both;
     left: -400px;
  }
  ul.oe_menu &gt; li{
      padding-bottom:2px;
      float:left;
      position:relative;
  }
  ul.oe_menu &gt; li &gt; 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 &gt; li &gt; a:hover,
  ul.oe_menu &gt; li.selected &gt; a{
      background:#fff;
      color:#101010;
      opacity:1.0;
  }
  .oe_wrapper ul.hovered &gt; li &gt; 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;
  }
  </code></pre>