Question

我有这种情况https://jsfiddle.net/naufragio/rb2q9sxj/1/当我将鼠标悬停在“US EDITION”元素上时会触发下拉菜单，但它会显示到导航栏的边框，而不是我想要的。

我尝试使用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*/

Answer 1

看起来类listfirstnav有一个overflow:hidden，从你的css中移除并完成！

.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;
}

Answer 2

.listfirstnav中的溢出：隐藏规则是你的问题，只需删除该规则。

.listfirstnav{
    ...
    overflow:hidden; /*this needs removing*/
    ...
}

这是纠正的小提琴：

https://jsfiddle.net/rb2q9sxj/2/

离开div

2 个答案: