我的下拉菜單移動下面的內容

Question

對不起，如果這篇文章格式不正確，這是我的第一個SO貼子。

我最近學到了html，css，html5和css3的基礎知識，並一直試圖擴展我可以做的事情並創建更好的網站，以便我可以開始組合並使用更高級的技術。我想要學習如何做的第一件事是用jquery製作一個下拉菜單，在幾個教程後，我設法按照我喜歡的方式獲得它。

我遇到的問題是，當我的菜單下拉菜單下的所有內容向下移動時，我在這裏尋找一些解決方案，並且大多數人建議將菜單的位置設置爲絕對的，z-index 100.這確實會阻止內容向下移動，但它會使我的下拉菜單向右而不是向下移動。

下面我將張貼我的HTML，CSS和JQuery（在CSS我已刪除的位置：絕對的z-index：100，但它是下的.navigation李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

你需要上的li標籤ul標籤和position:relative;（UL的母公司）使用position:absolute;

絕對位置將使得d ropdown列表出文檔的流程，這將不影響其它元件

的位置見代碼片斷：

$(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-->