Todd Gilbey Todd Gilbey - 1 month ago 12
CSS Question

Bootstrap Tab Pane in dropdown menu

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.

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&amp;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>




Answer

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;

#slide-down-banner ul ul{
   display:none;
   position:absolute;
}

To fix please add the follow class within the 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 {

Here is the sample with the above fixes added : http://codepen.io/Nasir_T/pen/yamBBX?editors=1100

Hope this helps.