I'm wanting a BS tab pane section to be added to a dropdown menu as illustrated in the Snippet. All the coding is present with the BS directories in the head section so its clearly an adjustment to the CSS of the document that is needed.
我希望向下拉菜单中添加一个BS选项卡窗格，如代码片段所示。所有的编码都包含在头部部分的BS目录中，因此这显然是对文档CSS的调整。
Why doesn't the tab pane show in the dropdown menu when you select "signup" at the end of the menu bar?
当您在菜单栏的末尾选择“注册”时，为什么选项卡窗格没有显示在下拉菜单中呢?
<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 个解决方案
#1
1
I think that the following class is actually causing your .nav ul to set to display:none as well which is causing your sub tabs to be hidden even when your making the .slide-down-banner-menu-panel set back to block on hover;
我认为下面的类实际上导致你的。nav ul设置为显示:也没有，这导致你的子标签被隐藏，即使你设置。slide-down-banner-menu-panel设置为在悬停时被阻塞;
#slide-down-banner ul ul{
display:none;
position:absolute;
}
To fix please add the follow class within the css:
要修复，请在css中添加以下类:
#slide-down-banner ul li:hover .slide-down-banner-menu-panel, .nav {
display:block !important;
}
and remove the display:block; property from the class #slide-down-banner ul li:hover .slide-down-banner-menu-panel {
和删除显示:块;属性来自#slide-down-banner ul li:悬停。
Here is the sample with the above fixes added : http://codepen.io/Nasir_T/pen/yamBBX?editors=1100
下面是添加了上述补丁的示例:http://codepen.io/nasir_t/pen/yambbx?
[Additionally]
(此外)
For the hover border on the sub tab menu and also to apply css to the tab menu use the following classes (Remove your .nav nav-tabs classes at the end of your css)
对于子选项卡菜单上的悬停边框，以及将css应用到选项卡菜单上，请使用以下类(在css末尾删除.nav -tabs类)
.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;
}
Lastly i would suggest you clean up your css. There are alot of repetitive properties and classes and also of parent css is over-writing child css. Try to keep seperate css class for each individual object and also group them up using parent class name before any child class declaration.
最后，我建议您清理css。有很多重复的属性和类，而且父css也在重写子css。尝试为每个单独的对象保留独立的css类，并在任何子类声明之前使用父类名称对它们进行分组。
#1
1
I think that the following class is actually causing your .nav ul to set to display:none as well which is causing your sub tabs to be hidden even when your making the .slide-down-banner-menu-panel set back to block on hover;
我认为下面的类实际上导致你的。nav ul设置为显示:也没有，这导致你的子标签被隐藏，即使你设置。slide-down-banner-menu-panel设置为在悬停时被阻塞;
#slide-down-banner ul ul{
display:none;
position:absolute;
}
To fix please add the follow class within the css:
要修复，请在css中添加以下类:
#slide-down-banner ul li:hover .slide-down-banner-menu-panel, .nav {
display:block !important;
}
and remove the display:block; property from the class #slide-down-banner ul li:hover .slide-down-banner-menu-panel {
和删除显示:块;属性来自#slide-down-banner ul li:悬停。
Here is the sample with the above fixes added : http://codepen.io/Nasir_T/pen/yamBBX?editors=1100
下面是添加了上述补丁的示例:http://codepen.io/nasir_t/pen/yambbx?
[Additionally]
(此外)
For the hover border on the sub tab menu and also to apply css to the tab menu use the following classes (Remove your .nav nav-tabs classes at the end of your css)
对于子选项卡菜单上的悬停边框，以及将css应用到选项卡菜单上，请使用以下类(在css末尾删除.nav -tabs类)
.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;
}
Lastly i would suggest you clean up your css. There are alot of repetitive properties and classes and also of parent css is over-writing child css. Try to keep seperate css class for each individual object and also group them up using parent class name before any child class declaration.
最后，我建议您清理css。有很多重复的属性和类，而且父css也在重写子css。尝试为每个单独的对象保留独立的css类，并在任何子类声明之前使用父类名称对它们进行分组。