1
Ich möchte, dass ein BS-Registerkartenbereich zu einem Dropdown-Menü hinzugefügt wird, wie im Snippet dargestellt. Die gesamte Kodierung ist mit den BS-Verzeichnissen im Kopfbereich vorhanden, so dass es sich eindeutig um eine Anpassung an das CSS des Dokuments handelt, das benötigt wird.Registerkarte "Bootstrap" im Dropdown-Menü
Warum wird das Registerkartenfenster nicht im Dropdown-Menü angezeigt, wenn Sie am Ende der Menüleiste "Anmelden" auswählen?
<body>
<style>
#slide-down-banner{
\t background-color:#0D5C9E;
\t position:fixed;
\t top:0;
\t z-index:9999;
\t box-shadow:0 0 20px 0;
\t width:100%;
\t text-align:center;
}
#slide-down-banner ul{
\t list-style-type:none;
\t margin:0;
\t padding:0;
\t position:relative;
\t font-size:0px;
}
#slide-down-banner ul ul{
\t display:none;
\t position:absolute;
}
/*#slide-down-banner ul li:hover ul{
\t display:block;
\t width:100%;
\t background-color:#E0DDDD;
\t left:0;
\t right:0;
\t border-bottom-style:solid;
\t border-width:5px;
\t border-color:#3A83F3;
\t padding:20px;
\t padding-bottom:20px;
\t box-shadow: 0px 5px 30px #050505;
}*/
#slide-down-banner ul li{
\t display:inline-block;
\t font-weight:bold;
}
#slide-down-banner ul li a{
\t font-size:14px;
\t color:white;
\t font-weight:bold;
}
#slide-down-banner ul li a i{
\t padding-left:5px;
}
#slide-down-banner ul li:hover{
\t background-color:#3A83F3;
\t transition-duration:0.5s;
}
#slide-down-banner ul li a,visited{
\t padding:15px;
\t display:block;
\t text-decoration:none;
}
#slide-down-banner ul li:hover > a:after{
\t content: ' ';
border-color: transparent transparent #E0DDDD transparent;
border-style: solid;
border-width: 10px;
position: absolute;
\t left:50%;
\t margin-left:-10px;
\t bottom:0px;
\t transition-duration:0.5s;
\t z-index:99999999;
\t display:inline;
}
#slide-down-banner ul li:hover > a{
\t color:white;
\t position:relative;
\t display:block;
}
.container{
\t width:1000px;
\t background-color:transparent;
\t margin:0 auto;
\t text-align:left;
\t margin-bottom:20px;
}
#slide-down-banner ul ul a{
\t color:#8A8A8A;
\t text-align:left;
\t padding:5px;
\t padding-left:0;
\t font-weight:100;
}
#slide-down-banner ul ul a:hover{
\t color:#0D0155;
}
#slide-down-banner ul li:hover ul input[type="email"]{
\t text-decoration:underline;
}
#slide-down-banner ul ul form input{
\t font-weight:100;
\t background-image:url(../../Icons/search_icon.png);
\t background-repeat:no-repeat;
\t background-position:5px,5px;
\t padding-left:30px;
}
#slide-down-banner ul li:hover ul .main-menu-column-header a{
\t font-weight:bold;
}
#slide-down-banner ul li:hover ul .main-menu-column-header-non-link{
\t font-weight:bold;
}
#slide-down-banner ul li:hover ul input[type="email"]{
\t padding:25px;
\t background-image:none;
\t width:100%;
\t padding-left:10px;
\t border-style:solid;
\t border-width:3px;
\t border-color:#3A83F3;
\t border-radius:0;
\t text-decoration:none;
}
.email-signup-container{
\t position:relative;
\t width:300px;
\t margin-top:10px;
}
#slide-down-banner ul li:hover ul input[type="submit"]{
\t position:absolute;
\t padding:26px;
\t right:0;
\t height:100%;
\t top:0;
\t color:#FFF;
\t background-color:#3A83F3;
\t border-style:none;
\t background-image:none;
}
#slide-down-banner ul li:hover ul input[type="submit"]:hover{
\t background-color:#0D5C9E;
}
#slide-down-banner ul li:hover ul form span{
\t color:black;
}
.inline-links:hover{
\t text-decoration:underline !important;
}
.slide-down-banner-menu-panel{
\t display:none;
}
#slide-down-banner ul li:hover > .slide-down-banner-menu-panel{
\t display:block;
\t height:200px;
\t background-color:#E0DDDD;
\t position:absolute;
\t left:0;
\t right:0;
\t padding:20px;
\t color:black;
\t box-shadow: 0px 5px 30px #050505;
}
.slide-down-banner-menu-panel-center{
\t width:1000px;
\t margin:0 auto;
}
.slide-down-banner-menu-panel-center a{
\t color:black;
}
.tab-pane{
\t padding:10px;
}
.nav > li{
\t border-radius:0;
}
.nav nav-tabs li a{
\t color:black;
}
.nav nav-tabs > li.active > a{
\t background-color: red !important;
\t color:#0D0155 !important;
\t border-radius:0;
\t border-bottom-style:none;
}
</style>
<div id="slide-down-banner">
\t <ul>
\t <li><a href="#">Our services</a>
\t <ul>
\t <div class="container">
\t <div class="col-md-12">
\t <div class=" main-menu-column col-md-3">
\t <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>
\t <ul>
<div class="container">
\t <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>
\t <ul>
\t <div class="container">
\t <div class="col-md-12">
\t <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>
\t <ul>
\t <div class="container">
\t <div class="col-md-12">
\t <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>
\t <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="[email protected]" 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>
\t \t \t \t \t \t </div>
</div>
</div>
</ul>
</li>
<li><a href="#">Planning & guidence</a>
\t <ul>
\t <div class="container">
\t <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>
\t <ul>
</ul>
</li>
<li><a href="#">Signup</a>
\t <div class="slide-down-banner-menu-panel">
\t <div class="slide-down-banner-menu-panel-center">
\t <div class="container">
\t <ul class="nav nav-tabs">
\t <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">
\t <div class="tab-pane fade in active" id="#home">
\t This is a tab pane
</div>
<div class="tab-pane fade in" id="#home1">
\t This is a tab pane
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Vielen Dank & Ihr Vorschlag wird ebenfalls notiert :) –