下拉菜单中的Bootstrap Tab窗格

时间:2016-10-31 15:54:32

标签: jquery html css twitter-bootstrap

enter image description here我希望将一个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&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>

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类,并在任何子类声明之前使用父类名对它们进行分组。