1
Ich habe diese Situation https://jsfiddle.net/naufragio/rb2q9sxj/1/, wenn ich über das "US EDITION" -Element den Dropdown-Menü ausgelöst wird, aber es zeigt sich nur bis zu den Grenzen der Navigationsleiste, nicht darüber hinaus, wie ich würde mögen.Dropdown-Menü ausgeblendet, wenn aus dem div
Ich habe versucht mit Z-Index und Überlauf sichtbar, aber keiner von ihnen gab mir das Ergebnis, das ich will (um das Menü vollständig anzuzeigen).
Kann mir jemand freundlicherweise sagen, warum ist das?
Vielen Dank!
HTML:
<body>
<div class="container">
<header>
<nav class="firstnav">
<ul class="listfirstnav">
<li class="left dropdown">
<a href="#home" class="edition drop-btn">U.S. EDITION
<span class="fa fa-chevron-down" aria-hidden="true">
<div class="dropdown-content">
<a href="#">Apps</a>
<a href="#">Gear</a>
<a href="#">Tech</a>
<a href="#">Creative</a>
<a href="#">Contributors</a>
<a href="#">Insights</a>
<a href="#">Launch</a>
<a href="#">World</a>
<a href="#">Distract</a>
<a href="#">Offers</a>
</div>
</span>
</a>
</li>
<li class="left"><a href="#home">Wed, Aug 30, 2017</a></li>
<li class="right"><a href="#news" class="subscribe">SUBSCRIBE</a></li>
<li class="right"><a href="#contact">SIGN IN</a></li>
<li><a class="aside aaa" href="#home">LATEST HEADLINES</a></li>
<li><a class="aside" href="#home">After Trump’s Snub, Sean Spicer Finally Meets the Pope</a></li>
<li><a class="aside" href="#news">Arsenal Could See Nightmare Exodus on Deadline Day</a></li>
<li><a class="aside" href="#contact">Liverpool Prepares to Hijack £40 Million Chelsea Deal</a></li>
<li><a class="aside" href="#about">How Did Princess Diana Die?</a></li>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
html,body {
height: 100%; margin: 0px; padding: 0px; }
#navbar {
margin-bottom:0; }
.alert {
border-radius: 0; }
.container {
width:100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto; }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
height:100%;
min-height: 1px;
padding-right: 0;
padding-left: 0; }
.row {
margin-right: 0;
margin-left: 0; }
.footer {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
border-top: none; }
.panel {
border:none; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.container {
background-color:transparent;
margin:0 auto;
width:80%;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.header{
width: 100%;
}
.listfirstnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: red;
border: 1px solid rgba(0, 0, 0, 0.3);
height: 120px;
}
li.left{
position: relative;
float: left;
top:40px;
font-weight: bold;
font-size: 18px;
}
li.right{
position: relative;
float: right;
top:40px;
font-weight: bold;
font-size: 18px;
}
.title {
position: absolute;
width: 600px; /* Need a specific value to work */
text-align: center;
margin: 0 auto;
top:10px;
left: 0;
right: 0;
color: white;
font-size: 90px;
font-weight: bold;
display: inline-block;
}
.firstnav li a {
display: block;
padding: 12px 16px;
color:white;
text-decoration: none;
}
.firstnav li a.subscribe{
color:red;
background-color: white;
margin-right: 10px;
}
.listsecondnav {
list-style-type: none;
padding: 0;
text-align: center;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.3);
height: 70px;
}
li.center {
display: inline-block;
border: 1px solid transparent;
border-right-color: black;
position: relative;
top: 25%;
}
li.center:last-child {
border-right-color: transparent;
}
.secondnav li a {
padding: 0 15px;
color:black;
font-size: 24px;
text-decoration: none;
}
a:link, a:visited {
display:block;
font-weight:bold;
color:#FFFFFF;
text-align:center;
text-decoration:none;
text-transform:uppercase;
vertical-align: middle;
}
/*aside navigation bar*/
.verticalbar {
list-style-type: none;
margin: 20px 20px;
padding: 0;
float:right;
height: 540px;
max-width: 100%;
}
.verticalbar li a {
display: block;
color: #000;
padding: 8px 0;
text-decoration: none;
text-align: left;
}
/* Change the link color on hover */
.verticalbar li a:hover {
background-color: #555;
color: white;
}
a.aside:link, a.aside:visited {
text-transform:none;
}
.verticalbar li a.aaa {
color: grey;
}
.verticalbar li {
border-top: 1px solid #d9d9d9;
}
.verticalbar li:first-child {
border-top: none;
}
/*imag*/
.imgtop {
width: 100%;
float: left;
padding:20px;
}
/*subheader*/
.trump{
font-size: 30px;
font-weight: bold;
}
h2{
font-weight: bold;
}
.articles {
width: 100%;
float: left;
}
.bella {
padding:20px;
}
.articleone {
clear: left;
}
.articletwo {
}
.subheaderimg{
width: 100%;
}
/*secondlinearticles*/
.articlesdos {
width: 100%;
float: left;
}
/*dropdown menu*/
.dropdown:hover .dropdown-content {
display: block; }
.drop-btn:hover {
color: #333; }
.dropdown-content {
display: none;
position: absolute;
top: 48px;
left: 0;
background-color: #fff;
width: 150px;
overflow: visible;
}
.dropdown .dropdown-content a {
display: block;
color: #999;
font-family: "Ropa Sans", sans-serif;
text-transform: uppercase;
border-top: 1px solid #dadada;
text-align: left;
padding: 5px;
padding-left: 20px;
overflow: visible;
}
.dropdown-content a:hover {
color: #333; }
/*fine menu tendina*/
entfernen Überlauf und Höheneigenschaften auf .listfirstnav und geben Tags einen Versuch –
Ihre HTML ungültig ist, können Sie nicht verschachtelt Anker – Pete