在悬停操作时，CSS下拉菜单会放大父级宽度

时间：2016-12-08 12:56:42

标签： html css

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

代码：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：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;
}

答案 1 :(得分：0)

请尝试以下代码

删除溢出隐藏

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

添加绝对位置

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

替换浮左

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

你必须使用绝对位置，你不能看到它有效，因为ul有溢出：隐藏;

添加此css：

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

答案 3 :(得分：0)

在你的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; */
}

答案 4 :(得分：0)

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

修复解决方案非常简单。您希望position: absolute;用于div.dropdowncontent CSS类。您还希望将您的父li代码设为position: relative;，以使div.dropdowncontent约束在父li内。然后，使用ul时，您的主要overflow: hidden代码存在问题。这样可以防止您看到下拉列表。我理解您使用overflow: hidden;的原因 - 您将其用作clearfix。但在这种情况下，这是一个问题，因为它隐藏了你的下拉列表。因此，我们希望将:before与ul一起用于clearfix。应用修复程序的步骤如下。

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

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中已有的指定声明。我之所以添加这个单独的声明是因为它＆ ＃39;更明显的是我所包含的内容，为您提供了您正在寻找的结果）：

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

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

li.dropdown:hover div.dropdowncontent {
    display: block;
}
相关问题
最新问题