我面临的问题是 jquery-tab 阻止了位于导航栏 id="NavBar" 上的主菜单类="oe_wrapper"。我希望 oe_menu 可以覆盖选项卡。这段代码有问题吗?提前致谢。
加价:
<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;
}