html - CSS 下拉菜单在悬停操作时扩大父级宽度

Question

我有以下 Html 文件和 CSS 文件。当我将鼠标悬停在主导航栏上以打开下拉菜单时，父宽度会随着下拉菜单一起变大。我怎样才能解决这个问题？如果我将 position: absolute 设置为下拉菜单，它根本不起作用。(悬停不会触发下拉菜单)。我把我的代码放在这里:https://jsfiddle.net/L67oxmqc/2/ .谢谢!

代码:

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
h1 {
  color: navy;
  margin-left: 20px;
}
/* SECTION WITH THE heading text */

#boldtext {
  color: Black;
  border-radius: 15px;
  background: #a9bcba;
  padding: 10px;
  width: 200px;
  height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */

#quotetext {
  color: Black;
  font-size: 18px;
  border-radius: 15px;
  padding: 30px;
  width: 400px;
  height: 150px;
}
div.quote {
  position: absolute;
  bottom: 5px;
  right: 50px;
  width: 30px;
  /* border: 2px solid rgb(150,245,255);
    	opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */

div.menu ul {
  border-radius: 05px;
  position: relative;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  background-color: #a9bcba;
  /*z-index: -1; */
}
div.menu li {
  float: left;
}
div.menu li a {
  display: inline-block;
  text-align: center;
  margin: 0px;
  padding: 10px 10px;
  color: white;
}
div.menu li a:hover {
  background-color: #879694;
  color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */

.dropdowncontent a:hover {
  background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
  display: block;
}
div.dropdowncontent {
  display: none;
  /*	position: absolute; */
  background-color: #a9bcba;
  width: 115px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
  color: red;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: right;
  overflow: auto;
}

<br>
<!-- Header -->

<b id="boldtext">Welcome</b>
<br>
<br>
<br>

<!-- Menu bar-->

<div class="menu">
  <ul>
    <li class="dropdown"><a href="default.asp">Boeing Family</a>
      <div class="dropdowncontent">
        <a href="#">Boeing 737 class</a>
        <a href="#">Boeing 747 class</a>
        <a href="#">Boeing 787 class</a>
      </div>
    </li>
    <li><a href="news.asp">Airbus Family</a>
    </li>
    <li><a href="contact.asp">Others</a>
    </li>
    <li style="float:right"><a href="about.asp">Contact</a>
    </li>
    <!-- The Contact button is set to be on the right side of the Navigation bar-->
  </ul>
</div>


<div class="quote" id="quotetext">
  <p><q><cite>A generic quote.</q>
    </cite>

    — Author.</p>
</div>

<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
  <img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">


  <!-- Airbus planes image that triggers the Airbus menu-->

  <a href="Airbus.htm" </a>
    <img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">

    <!-- ATR planes image that triggers the ATR menu-->

    <a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
      <img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">

      <!-- Link to the Frequently asked questions page-->

      <a href=#>
        <img src="question.jpg" alt="question image" style="width:350px;height:150px;">
      </a>

      <br>
      <br>

Answer 1

只需更新您的风格，它可能适合您

div.menu ul {
    background-color: #a9bcba;
    border-radius: 5px;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

div.dropdowncontent {
    background-color: #a9bcba;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    display: none;
    position: absolute;
    width: 115px;
}