下拉菜单中的Bootstrap Tab窗格
我希望将一个BS标签窗格部分添加到下拉菜单中，如代码段中所示。所有编码都存在于头部的BS目录中，因此它显然是对所需文档的CSS的调整。
为什么在菜单栏末尾选择“注册”时，下拉菜单中是否显示选项卡窗格？
<body>
<style>
#slide-down-banner{
background-color:#0D5C9E;
position:fixed;
top:0;
z-index:9999;
box-shadow:0 0 20px 0;
width:100%;
text-align:center;
}
#slide-down-banner ul{
list-style-type:none;
margin:0;
padding:0;
position:relative;
font-size:0px;
}
#slide-down-banner ul ul{
display:none;
position:absolute;
}
/*#slide-down-banner ul li:hover ul{
display:block;
width:100%;
background-color:#E0DDDD;
left:0;
right:0;
border-bottom-style:solid;
border-width:5px;
border-color:#3A83F3;
padding:20px;
padding-bottom:20px;
box-shadow: 0px 5px 30px #050505;
}*/
#slide-down-banner ul li{
display:inline-block;
font-weight:bold;
}
#slide-down-banner ul li a{
font-size:14px;
color:white;
font-weight:bold;
}
#slide-down-banner ul li a i{
padding-left:5px;
}
#slide-down-banner ul li:hover{
background-color:#3A83F3;
transition-duration:0.5s;
}
#slide-down-banner ul li a,visited{
padding:15px;
display:block;
text-decoration:none;
}
#slide-down-banner ul li:hover > a:after{
content: ' ';
border-color: transparent transparent #E0DDDD transparent;
border-style: solid;
border-width: 10px;
position: absolute;
left:50%;
margin-left:-10px;
bottom:0px;
transition-duration:0.5s;
z-index:99999999;
display:inline;
}
#slide-down-banner ul li:hover > a{
color:white;
position:relative;
display:block;
}
.container{
width:1000px;
background-color:transparent;
margin:0 auto;
text-align:left;
margin-bottom:20px;
}
#slide-down-banner ul ul a{
color:#8A8A8A;
text-align:left;
padding:5px;
padding-left:0;
font-weight:100;
}
#slide-down-banner ul ul a:hover{
color:#0D0155;
}
#slide-down-banner ul li:hover ul input[type="email"]{
text-decoration:underline;
}
#slide-down-banner ul ul form input{
font-weight:100;
background-image:url(../../Icons/search_icon.png);
background-repeat:no-repeat;
background-position:5px,5px;
padding-left:30px;
}
#slide-down-banner ul li:hover ul .main-menu-column-header a{
font-weight:bold;
}
#slide-down-banner ul li:hover ul .main-menu-column-header-non-link{
font-weight:bold;
}
#slide-down-banner ul li:hover ul input[type="email"]{
padding:25px;
background-image:none;
width:100%;
padding-left:10px;
border-style:solid;
border-width:3px;
border-color:#3A83F3;
border-radius:0;
text-decoration:none;
}
.email-signup-container{
position:relative;
width:300px;
margin-top:10px;
}
#slide-down-banner ul li:hover ul input[type="submit"]{
position:absolute;
padding:26px;
right:0;
height:100%;
top:0;
color:#FFF;
background-color:#3A83F3;
border-style:none;
background-image:none;
}
#slide-down-banner ul li:hover ul input[type="submit"]:hover{
background-color:#0D5C9E;
}
#slide-down-banner ul li:hover ul form span{
color:black;
}
.inline-links:hover{
text-decoration:underline !important;
}
.slide-down-banner-menu-panel{
display:none;
}
#slide-down-banner ul li:hover > .slide-down-banner-menu-panel{
display:block;
height:200px;
background-color:#E0DDDD;
position:absolute;
left:0;
right:0;
padding:20px;
color:black;
box-shadow: 0px 5px 30px #050505;
}
.slide-down-banner-menu-panel-center{
width:1000px;
margin:0 auto;
}
.slide-down-banner-menu-panel-center a{
color:black;
}
.tab-pane{
padding:10px;
}
.nav > li{
border-radius:0;
}
.nav nav-tabs li a{
color:black;
}
.nav nav-tabs > li.active > a{
background-color: red !important;
color:#0D0155 !important;
border-radius:0;
border-bottom-style:none;
}
</style>
<div id="slide-down-banner">
<ul>
<li><a href="#">Our services</a>
<ul>
<div class="container">
<div class="col-md-12">
<div class=" main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">ISA Accounts</div>
<a class="slide-down-link" href="#">Browse our ISA accounts</a>
<a href="#">Junior ISA Accounts</a>
<a href="#">Current Interest Rates</a>
<a href="#">ISA Costs & Charges</a>
<a href="#"><strong>Investor Information</strong><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
<div class="main-menu-column-header-non-link">Currency Services</div>
<a href="#">Curerncy trading</a>
<a href="#">Spread betting</a>
<a href="#">Currency Spreads</a>
<a href="#">Trading Commissions</a>
<a href="#">Investor Information<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header"><a href="#"><strong>Pension Services</strong><i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Drawdowns</a>
<a href="#">Annuities</a>
<a href="#"><b>Browse our pension funds</b><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
<a href="#"><b>Investor Information<i class="fa fa-angle-double-right" aria-hidden="true"></i></b></a>
<div class="main-menu-column-header"><a href="#"><strong>Share dealing</strong><i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Trading Costs</a>
<a href="#">Assets</a>
<a href="#">FTSE 100</a>
<a href="#">FTSE 250</a>
<a href="#">FTSE 350</a>
<a href="#"><b>Investor Information<i class="fa fa-angle-double-right" aria-hidden="true"></i></b></a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header"><a href="#"><strong>Our Funds</strong><i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Fund search</a>
<a href="#">Browse our funds</a>
<a href="#">Income funds</a>
<a href="#">Growth funds</a>
<a href="#">Mutusl Funds</a>
<a href="#">OEIC's</a>
<a href="#">Investment Trusts</a>
<div class="main-menu-column-header"><a href="#"><strong>Enterprise Investing</strong><i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Venture Capital Trusts</a>
<a href="#">Enterprise Investment Schemes</a>
<a href="#">Tax investives</a>
<a href="#">Risk Disclaimer</a>
</div>
</div>
</div>
</ul>
</li>
<li><a href="#">Fund Research</a>
<ul>
<div class="container">
<div class="col-md-12">
<div class=" main-menu-column col-md-6">
<div class="main-menu-column-header-non-link">Search our Funds</div>
<p><strong>Search our range of available funds, or go to our <a class="inline-links" style="display:inline; color:black;" href="#"><strong>advanced section.</strong></a></strong></p>
<form action="" class="search-form" >
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search me</label>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
<input type="text" class="form-control" name="search" id="search-slide-down" placeholder="Search for a stock by name or ticker symbol">
<p><a class="inline-links" style="display:inline;" href="#">Recently searched funds<i class="fa fa-search" aria-hidden="true"></i></a></p>
</div>
</form>
</div>
</div>
</div>
</ul>
</li>
<li><a href="#">Share prices & stock markets</a>
<ul>
<div class="container">
<div class="col-md-12">
<div class="main-menu-column col-md-6">
<div class="main-menu-column-header-non-link">Search for a stock</div>
<p><strong>Search ur range of available funds, or go to our <a class="inline-links" style="display:inline; color:black;" href="#"><strong>advanced section.</strong></a></strong></p>
<form action="" class="search-form" >
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search me</label>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
<input type="search" class="form-control" name="funds-search" placeholder="Search for a fund or ISBN..">
<p><a class="inline-links" style="display:inline;" href="#">Recently searched stocks<i class="fa fa-search" aria-hidden="true"></i></a></p>
</div>
</form>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header"><a href="#">Browse our shares<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Leaders & Laggagrds</a>
<div class="main-menu-column-header"><a href="#">Market News<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Director Dealings</a>
<a href="#">AIM Funds</a>
<a href="#">Newspaper roundup</a>
<a href="#">Financial diary</a>
<a href="#">Corporate actions</a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">Other investments</div>
<a href="#">Venture Capital Trusts</a>
<a href="#">Enterprise Investment Schemes</a>
<a href="#">Venture Capital Funds</a>
<a href="#">Tax benefits & sacrifices</a>
</div>
</div>
</div>
</ul>
</li>
<li><a href="#">Newsroom</a>
<ul>
<div class="container">
<div class="col-md-12">
<div class="main-menu-column col-md-6">
<div class="main-menu-column-header-non-link">Get stock alerts and news articles straight to your inbox.</div>
<p>Your data will not be share with anybody..we promise.</p>
<form action="//facebook.us14.list-manage.com/subscribe/post?u=88892808ac0fbee0b493cbb20&id=1e0feef922" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class=" form-group has-feedback">
<label for="search" class="sr-only">Search me</label>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
<div class="email-signup-container">
<input type="email" class="form-control" name="funds-search" placeholder="example@example.com" required>
<input type="submit" class="fontAwesome" value="Submit"/>
</div>
</div>
<span style="color:black;" class="help-block">Your data will not be shared with any third parties.</span>
</form>
</div>
</div>
</div>
</ul>
</li>
<li><a href="#">Planning & guidence</a>
<ul>
<div class="container">
<div class="col-md-12">
<div class="col-md-12"><div style="font-size:30px !important;" class="main-menu-column-header-non-link">Planning & guidence.</div></div>
</div>
<div class="col-md-12">
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">Planning for the future</div>
<a href="#">Planning your future</a>
<a href="#">Retirement & Savings</a>
<div class="main-menu-column-header"><a href="#">Investor relations<i class="fa fa-angle-double-right" aria-hidden="true"></i></a></div>
<a href="#">Share prices</a>
<a href="#">Invest in our business</a>
<a href="#">Private Shareholdings</a>
<a href="#">Become an Investor</a>
<a href="#">Careers</a>
</div>
<div class="main-menu-column col-md-3">
<div class="main-menu-column-header-non-link">Retirement & Savings</div>
<a href="#">Your pension options</a>
<a href="#">Later Life</a>
<a href="#">401(K)</a>
<a href="#">Transfer your pension</a>
<div class="main-menu-column-header-non-link">Market Watch</div>
<a href="#">FTSE 100</a>
<a href="#">FTSE 250</a>
<a href="#">FTSE 350</a>
<a href="#">AIM Markets</a>
</div>
<div class="main-menu-column col-md-6">
<div class="col-md-12 banner">
<div class="banner-text col-md-6"></div>
<div class="banner-caption col-md-6"><p>The value of your investments can go downwards as well as upwards, therefore, you may not get back the amount you initially invested.</p></div>
</div>
</div>
</div>
</div>
</ul>
</li>
<li><a href="#">Pensions & Savings</a>
<ul>
</ul>
</li>
<li><a href="#">Signup</a>
<div class="slide-down-banner-menu-panel">
<div class="slide-down-banner-menu-panel-center">
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Initial Costs</a></li>
<li class=""><a href="#home1" data-toggle="tab">Initial</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="#home">
This is a tab pane
</div>
<div class="tab-pane fade in" id="#home1">
This is a tab pane
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
1 个答案:
答案 0 :(得分：1)
我认为以下类实际上导致你的.nav ul设置为display：none，这导致你的子标签被隐藏，即使你将#slide-down-banner ul ul{
display:none;
position:absolute;
}
设置回阻止悬停时也是如此;
#slide-down-banner ul li:hover .slide-down-banner-menu-panel, .nav {
display:block !important;
}
要修复，请在css中添加以下类：
#slide-down-banner ul li:hover .slide-down-banner-menu-panel {并删除display：block;班级.nav > li{
border-radius:0 !important;
}
.nav > li a{
color:black !important;
}
.nav > li.active > a{
background-color: red !important;
color:#0D0155 !important;
border-radius:0 !important;
border-bottom-style:none !important;
}
.nav > li:hover a:after{
border-style:none !important;
}
以下是添加了上述修补程序的示例：http://codepen.io/Nasir_T/pen/yamBBX?editors=1100
<强> [另外]
对于子选项卡菜单上的悬停边框以及将css应用于选项卡菜单，请使用以下类（删除css末尾的.nav nav-tabs类）
{{1}}
最后我建议你清理你的CSS。有很多重复的属性和类，父css也覆盖了孩子的CSS。尝试为每个单独的对象保留单独的css类，并在任何子类声明之前使用父类名对它们进行分组。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？