我的下拉菜单会移动它下面的内容

Question

很抱歉，如果这篇文章格式不正确，这是我的第一篇SO帖子。

我最近学习了html，css，html5和css3的基础知识，并且一直在尝试扩展我能做的事情并制作更好的网站，这样我就可以开始投资组合并使用更先进的技术。我想要学习的第一件事就是使用jquery制作一个下拉菜单，经过一些教程后，我设法按照我喜欢的方式得到它。

我遇到的问题是，当我的菜单下拉菜单下方的所有内容随之移动时，我在这里寻找一些解决方案，大多数人建议将菜单的位置设为绝对值并且z-index为100这确实会阻止内容向下移动，但它会使我的下拉菜单向右移动而不是下降。

下面我将发布我的HTML，CSS和JQuery（在CSS中我删除了位置：绝对和z-index：100但它在.navigation li ul下）

$(function() {
  $('.btn').on('click', function() {
    var panelID = $(this).attr('data-panel');
    $('.' + panelID).fadeToggle(1000);
  });

});

$(document).ready(function() {
  $('.navigation li').hover(function() {
    $('ul', this).fadeIn();
  }, function() {
    $('ul', this).fadeOut();
  });
});

header,
nav,
footer,
section {
  display: block;
}

.container {
  width: 960px;
  background-color: dimgrey;
  margin: 0 auto;
  padding: 0;
}

.quadcol {
  width: 240px;
  float: left;
}

.clearfloat {
  clear: both;
}

.panelh {
  width: 200px;
  background-color: aquamarine;
  color: black;
}

.panel1,
.panel2,
.panel3,
.panel4 {
  width: 200px;
  background-color: white;
  color: black;
  margin-top: 10px;
  display: none;
}

h3 {
  font-size: 30px;
  padding: 5px;
  display: block;
  margin: 0;
}

.btn {
  align-self: center;
}

.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation li {
  float: left;
  width: 190px;
  background-color: chartreuse;
  color: black;
  border: 1px solid dimgrey;
  text-align: center;
  list-style: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation li ul {
  display: none;
  text-align: center;
  float: left;
  padding: 0;
  margin: 0;
  z-index: 100;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
  list-style: none;
}

.navigation li:hover {
  color: chartreuse;
  background-color: black;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation ul li:hover {
  color: chartreuse;
  background-color: black;
  margin-left: 5px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header>
    <hgroup align="center">
      <h1>JQuery Test Website</h1>
      <h2>A website for testing my JQuery skills</h2>
    </hgroup>
    <nav>
      <ul class="navigation">
        <li>Item 1</li>
        <li>Item 2
          <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
            <li>Item 2.4</li>
          </ul>
          <div class="clearfloat"></div>
        </li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5
          <ul>
            <li>Item 5.1</li>
            <li>Item 5.2</li>
            <li>Item 5.3</li>
            <li>Item 5.4</li>
          </ul>
          <div class="clearfloat"></div>
        </li>
      </ul>
    </nav>
  </header>


  <div class="clearfloat"></div>



  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel1">Button 1</button>
    <div class="panel1">
      <div class="panelh">
        <h3>Panel 1</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel2">Button 2</button>
    <div class="panel2">
      <div class="panelh">
        <h3>Panel 2</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel3">Button 3</button>
    <div class="panel3">
      <div class="panelh">
        <h3>Panel 3</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel4">Button 4</button>
    <div class="panel4">
      <div class="panelh">
        <h3>Panel 4</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>

  <div class="clearfloat"></div>
</div>
<!--End of container div-->

Answer 1

您需要使用position:absolute;标记上的ul和position:relative;标记上的li（ul的父级）

绝对位置会使下拉列表退出文档流程，这不会影响其他元素的位置

请参阅代码段：

$(function() {
  $('.btn').on('click', function() {
    var panelID = $(this).attr('data-panel');
    $('.' + panelID).fadeToggle(1000);
  });

});

$(document).ready(function() {
  $('.navigation li').hover(function() {
    $('ul', this).fadeIn();
  }, function() {
    $('ul', this).fadeOut();
  });
});

header,
nav,
footer,
section {
  display: block;
}

.container {
  width: 960px;
  background-color: dimgrey;
  margin: 0 auto;
  padding: 0;
}

.quadcol {
  width: 240px;
  float: left;
}

.clearfloat {
  clear: both;
}

.panelh {
  width: 200px;
  background-color: aquamarine;
  color: black;
}

.panel1,
.panel2,
.panel3,
.panel4 {
  width: 200px;
  background-color: white;
  color: black;
  margin-top: 10px;
  display: none;
}

h3 {
  font-size: 30px;
  padding: 5px;
  display: block;
  margin: 0;
}

.btn {
  align-self: center;
}

.navigation {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation li {
  float: left;
  width: 190px;
  background-color: chartreuse;
  color: black;
  border: 1px solid dimgrey;
  text-align: center;
  list-style: none;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
  position:relative;
}

.navigation li ul {
  display: none;
  text-align: center;
  float: left;
  padding: 0;
  margin: 0;
  z-index: 100;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
  list-style: none;
  position:absolute;
}

.navigation li:hover {
  color: chartreuse;
  background-color: black;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

.navigation ul li:hover {
  color: chartreuse;
  background-color: black;
  margin-left: 5px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -webkit-transition: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <header>
    <hgroup align="center">
      <h1>JQuery Test Website</h1>
      <h2>A website for testing my JQuery skills</h2>
    </hgroup>
    <nav>
      <ul class="navigation">
        <li>Item 1</li>
        <li>Item 2
          <ul>
            <li>Item 2.1</li>
            <li>Item 2.2</li>
            <li>Item 2.3</li>
            <li>Item 2.4</li>
          </ul>
          <div class="clearfloat"></div>
        </li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5
          <ul>
            <li>Item 5.1</li>
            <li>Item 5.2</li>
            <li>Item 5.3</li>
            <li>Item 5.4</li>
          </ul>
          <div class="clearfloat"></div>
        </li>
      </ul>
    </nav>
  </header>


  <div class="clearfloat"></div>



  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel1">Button 1</button>
    <div class="panel1">
      <div class="panelh">
        <h3>Panel 1</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel2">Button 2</button>
    <div class="panel2">
      <div class="panelh">
        <h3>Panel 2</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel3">Button 3</button>
    <div class="panel3">
      <div class="panelh">
        <h3>Panel 3</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>


  <div class="quadcol" align="center">
    <button class="btn" data-panel="panel4">Button 4</button>
    <div class="panel4">
      <div class="panelh">
        <h3>Panel 4</h3>
      </div>
      <p>Panel information here</p>
    </div>

  </div>

  <div class="clearfloat"></div>
</div>
<!--End of container div-->