css - Jquery-tab 异常阻塞我的 div

Question

我面临的问题是 jquery-tab 阻止了位于导航栏 id="NavBar"上的主菜单 class="oe_wrapper"。我希望 oe_menu 可以覆盖选项卡。这段代码有什么问题吗？提前致谢。

http://jsfiddle.net/Sp7Mk/

标记:

<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>
                        <a href="">Main Menu</a>
                        <div>
                            <ul>
                                <li class="oe_heading">
                                    My Account
                                </li>
                                <li><a href="#">Account Information</a></li>
                            </ul>
                            <ul>
                                <li class="oe_heading">
                                    Forms
                                </li>
                                <li><a href="#">F-1</a></li>
                                <li><a href="#">F-2</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
</div>

<div id="searchTab">
            <ul>
                <li><a href="#tabsAddll">Address</a></li>
                <li><a href="#tabsOther">Other</a></li>
            <li><a href="#tabsDis">Disabled</a></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

行内

<div id="NavBar" style="width: 500px; height: 100px; background-color: blue;">

您明确声明导航栏的高度为 100 像素，因此在 100 像素之后，DOM 中的空间结束，下一个元素开始呈现。尝试将高度更改为 175 像素，对我来说，将它放在其他菜单的正下方。