jquery - 为什么这个下拉列表超出窗口

Question

为什么这个下拉列表会超出窗口？

我正在使用 HTML + CSS3 + jQuery，我试图将下拉列表元素的位置更改为 fixed 和 top:0px 但它没有帮助!

我不明白为什么列表会超出页面，所以您正在等待有关此问题的最佳解决方案。

我需要你的帮助

$(document).ready(function(){

$('.menu').children().mouseenter(function(){


	$('.menu').children(this).find('div').fadeIn(500);


})

$('.menu').children().mouseleave(function(){


	$('.menu').children(this).find('div').fadeOut(500);


})

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="menu">

  <div class="element">
      Smaller
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>

  </div>

</div>


    <script src='jquery-3.4.1.min.js'></script>
    <script src='jquery.js'></script>

$(document).ready(function(){

$('.menu').children().mouseenter(function(){


	$('.menu').children(this).find('div').fadeIn(500);


})

$('.menu').children().mouseleave(function(){


	$('.menu').children(this).find('div').fadeOut(500);


})

})

.menu
{
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid black;
  background-color: #08298A;
  color: white;
  height: 50px;
  max-height: 50px;
}

.element 
{
  background-color: #0A0A2A;
  top: 0px;
  padding: 0px;
  margin: 0px;
}

.element div
{
  display: none;
  padding: 10px;
  background-color: #045FB4;
  border: 1px solid white;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">

  <div class="element">
      Smaller
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>

  </div>

</div>

<div class="menu">

  <div class="element">
      Smaller
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>
      <div>Paragraph 1</div>

  </div>

</div>



$(document).ready(function(){

$('.menu').children().mouseenter(function(){


$('.menu').children(this).find('div').fadeIn(500);


})

$('.menu').children().mouseleave(function(){


$('.menu').children(this).find('div').fadeOut(500);


})

})

Answer 1

它是 .menu 规则中的 align-items: center。这与 display: flex 结合意味着它将尝试将子 .element 垂直居中。在这种情况下，没有足够的空间，所以它的一部分显示在屏幕外。