1
我有這種情況https://jsfiddle.net/naufragio/rb2q9sxj/1/當我將鼠標懸停在「美國版」元素上的下拉菜單被觸發，但它顯示直到導航欄的邊界，不會超出我的意思喜歡。下拉菜單隱藏當出格
我試過z指數和溢出可見，但沒有一個給了我想要的結果（完全顯示菜單）。
任何人都可以告訴我爲什麼？
非常感謝！
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*/
上.listfirstnav刪除溢出和height屬性，並給予嘗試 –
你的HTML是無效的，你不能嵌套的錨標記 – Pete