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

Answer 2

这是我在下面提到的解决方案的 JSFiddle：https://jsfiddle.net/2sy0dn6w/

修复您的解决方案非常简单。你想为你的div.dropdowncontent CSS 类使用position: absolute;。您还想让您的父 li 标签具有 position: relative;，以将您的 div.dropdowncontent 限制在父 li 内。然后，您在使用overflow: hidden 时遇到了主要ul 标签的问题。这将防止您的下拉菜单被看到。而且我理解您为什么使用overflow: hidden; - 您将它用作clearfix。但在这种情况下，这是一个问题，因为它隐藏了您的下拉菜单。因此，我们希望将:before 与ul 一起用于clearfix。应用修复的步骤如下。

首先，从 div.menu ul {} 的 CSS 中删除 overflow: hidden;。这将创建以下内容：

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 ul {} CSS 之后，添加：

div.menu > ul::after {
    clear: both;
    display: table;
    content: ' ';
    overflow: hidden;
}

最后，在 CSS 的最底部，添加以下内容（您甚至可以将以下每个内容移动到您在 CSS 中已有的指定声明中。我单独添加此内容的原因是为了更明显我包括什么给你你正在寻找的结果）：

div.menu > ul > li {
    position: relative;
}

.dropdowncontent {
    position: absolute;
    top: 100%;
}

li.dropdown:hover div.dropdowncontent {
    display: block;
}

Answer 3

你必须使用绝对位置，你看不到它的工作，因为 ul 有溢出：隐藏；

添加这个css：

.menu ul{
    overflow:visible;
}
.menu ul li.dropdown{
    position : relative;
}
.menu ul li.dropdown .dropdowncontent{
    position : absolute;
    top:38px;
    left:0;
}

Answer 4

在你的 CSS 中试试这个：

添加 .menu 类并从 ul 中移除 bg-color

.menu {
  background-color: #a9bcba;
  height: 45px;
}

div.menu ul {
    border-radius: 05px;
    position: relative;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    //background-color: #a9bcba; <--- remove background
    /*z-index: -1; */
}

Answer 5

试试下面的代码

移除溢出隐藏

div.menu ul{
   ...
   overflow: hidden;
}

添加绝对位置

div.dropdowncontent {
   ...
   position: absolute;
}

替换左浮动

div.menu li{
    /* float: left; */
    display: inline-block;
}

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; 
  background-color: #a9bcba;
  /*z-index: -1; */
}
div.menu li {
  display: inline-block;
}
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>