Question

我有一个简单的页面，其中包含：header，topnav和body。 topnav将包含一个链接（可变宽度，因为它将是已登录用户的名称）以打开下拉菜单。

问题：下拉菜单被topnav“裁剪”。

我尝试过z-index解决方案，但没有成功。

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
}

.header {
    background-color: #F1F1F1;
    text-align: center;
    padding: 20px;
    font-size: 18pt;
    font-weight: bold;
}


.topnav {
  position: relative;
  top:0;
  overflow: hidden;
  background-color: #333;
  font-weight: bold;
  z-index: 1;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  cursor:pointer
}

.topnav a:hover {
  transition-delay: 70ms;
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.dropdown {
    position: absolute;
    display: inline-block;
    float: right;
    overflow: hidden;
    margin: 0;
    z-index: 100;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 70%;
  padding-top: 0px;
  color: #f2f2f2;
  background-color: blue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 200;
}

.dropdown:hover .dropdown-content {
    display: block;

}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Finestra modal */
.container {
    padding: 30px;
}
span.psw {
    float: right;
    padding-top: 16px;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 30%; /* Could be more or less, depending on screen size */
}

/* Full-width input fields */
.modal input[type=text], .modal input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
.modal button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
}

.imgcontainer {
    font-weight: bold;
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 9px;
    top: -20px;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

<link rel="stylesheet" href="css/topnav.css">

<!--  HEADER  -->
<div class="header">
  Sistema di Gestione
</div>

<!--  BARRA MENU  -->
<div class="topnav" id="navbar">
  <a class="active" href="index.php">Home</a>
  <a href="#segnalazioni.php">Segnalazioni</a>


  <div class="dropdown"><a>Dropdown></a>
  <div class="dropdown-content"><a>BANANA</a></div>
</div>


</div>



<!-- Form di Login -->
<div id="finestra" class="modal">
  <div class="modal-content">
    <form class="login" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
      <div class="imgcontainer">
        <span onclick="document.getElementById('finestra').style.display='none'" class="close" title="Chiudi finestra">&times;</span>
      </div>

      <div class="container">
        <input type="text" placeholder="Username" name="username" required>
        <input type="password" placeholder="Password" name="password" required>
        <button type="submit" name="login" value="login">Login</button>
      </div>
    </form>
  </div>
</div>

<!-- Script per chiudere il modal -->
<script>
// Get the modal
var modal = document.getElementById('finestra');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

Dropdown menu with blue background

Answer 1

你的溢出问题：在下拉列表的父div中隐藏。

在css下面更改

.topnav {
    position: relative;
    top: 0;
    /* overflow: hidden; */  // Removed
    background-color: #333;
    font-weight: bold;
    z-index: 1;
    display: block;
    width: 100%;   // Added
    height: 48px;  // Added
}

.dropdown {
    position: absolute;
    display: inline-block;
    float: right;
    /* overflow: hidden; */   // Removed
    margin: 0;
    z-index: 100;
}

＆＃13;

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
}

.header {
    background-color: #F1F1F1;
    text-align: center;
    padding: 20px;
    font-size: 18pt;
    font-weight: bold;
}


.topnav {
  position: relative;
  top:0;
  /* overflow: hidden; */
  background-color: #333;
  font-weight: bold;
  z-index: 1;
  width: 100%;
  height: 48px;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  cursor:pointer
}

.topnav a:hover {
  transition-delay: 70ms;
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.dropdown {
    position: absolute;
    display: inline-block;
    float: right;
    /*overflow: hidden;*/
    margin: 0;
    z-index: 100;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 70%;
  padding-top: 0px;
  color: #f2f2f2;
  background-color: blue;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 200;
}

.dropdown:hover .dropdown-content {
    display: block;

}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Finestra modal */
.container {
    padding: 30px;
}
span.psw {
    float: right;
    padding-top: 16px;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 30%; /* Could be more or less, depending on screen size */
}

/* Full-width input fields */
.modal input[type=text], .modal input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
.modal button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
}

.imgcontainer {
    font-weight: bold;
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 9px;
    top: -20px;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

＆＃13;

<link rel="stylesheet" href="css/topnav.css">

<!--  HEADER  -->
<div class="header">
  Sistema di Gestione
</div>

<!--  BARRA MENU  -->
<div class="topnav" id="navbar">
  <a class="active" href="index.php">Home</a>
  <a href="#segnalazioni.php">Segnalazioni</a>


  <div class="dropdown"><a>Dropdown></a>
  <div class="dropdown-content"><a>BANANA</a></div>
</div>


</div>



<!-- Form di Login -->
<div id="finestra" class="modal">
  <div class="modal-content">
    <form class="login" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
      <div class="imgcontainer">
        <span onclick="document.getElementById('finestra').style.display='none'" class="close" title="Chiudi finestra">&times;</span>
      </div>

      <div class="container">
        <input type="text" placeholder="Username" name="username" required>
        <input type="password" placeholder="Password" name="password" required>
        <button type="submit" name="login" value="login">Login</button>
      </div>
    </form>
  </div>
</div>

<!-- Script per chiudere il modal -->
<script>
// Get the modal
var modal = document.getElementById('finestra');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

＆＃13;

由topnav裁剪的CSS下拉列表

1 个答案: