将鼠标悬停在一个 bootstrap 带有子菜单的子菜单项上会重新排列父列表项

Question

我设置了悬停时可用的 bootstrap 下拉菜单。第一个下拉列表有 3 个列表项，每个列表项都有自己的列表，这也是一个在悬停时起作用的下拉列表。我的问题是，当我将鼠标悬停在这些项目上时，包含它们的列表会重新排列这些项目并以不同的方式显示，而不是显示为静态，每次只弹出子菜单。这是 Codepen 示例： Codepen

$(document).ready(function(){
  $('.menu_table li:has(ul)').addClass('has-child');

  $('.menu_table .dropdown-menu').filter(function(){
    return $(this).find('li').length > 7
}).css('columns', '2');
});

$(document).ready(function(){
  $('.menu_link').click(function() {
    $('.menu_link').next().css("maxHeight", "none");
  });
    $('.dropdown').hover(function() {
      $(this).find('>.dropdown-menu').stop(true, true).fadeIn(100);
    }, function() {
      $(this).find('>.dropdown-menu').stop(true, true).fadeOut(100);
    });
    $('.dropdown-submenu').hover(function() {
      $(this).find('>.dropdown-menu').stop(true, true).fadeIn(100);
    }, function() {
      $(this).find('>.dropdown-menu').stop(true, true).fadeOut(100);
    });
});

$(document).click(function(){
  $(".dropdown-menu").hide();
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$(".dropdown-menu").click(function(e){
  e.stopPropagation();
});

.menu_table {
 display: table;   /* Allow the centering to work */
  margin: auto;
  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.19);
  background-color: #ffffff;
  width: 100%;
  text-align: center;
}

.menu_table>ul {
 list-style: none;
  margin: auto;
 padding: 3px;
 }
.menu_table>ul>li {
  display: inline;
    margin-right: 25px;
}

.menu_table>ul>li>a {
  text-transform: capitalize;
  font-family: "proxima-nova";
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.4px;
  line-height: 40px;
  padding-top: 13px;
  padding-bottom: 13.5px;
  text-decoration: none;
}

.menu_table>ul>li.has-child > a::after {
  color: #444;
  content: ' ▾';
}

.menu_table>ul>li>a::before {
  width: 5px;
  height: 0px;
  background-color: #3777bc;
  position: absolute;
  content: "";
  display: block;
  left: -11px;
  bottom: 12.5px;
  z-index: 1;
  transition: all 0.25s ease-in-out;
}

.menu_table>ul>li>a:hover::before {
  height: 20px;
}


.menu_table .icon {
  display: none;
}

.menu_table .dropdown-menu {
  background-color: #183669;
  padding: 0px 4px 20px;
  top: 171%;
  left: -12px;
}
.menu_table .dropdown-menu>li {
  display: block;
  margin-right: auto;
  border-bottom: 1px solid #0000b3;
}

.menu_table .dropdown-menu>li>a {
  color: #ffffff;
  font-family: "proxima-nova";
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  text-transform: capitalize;
  letter-spacing: 0.64px;

  padding-top: 20px;
  padding-bottom: 0;
  position: relative;
  text-decoration: none;
}

.dropdown-menu>li>a:hover {
  background-color: transparent;
}

.menu_table .dropdown-menu>li>a::after {
  width: 5px;
  height: 0px;
  background-color: #3777bc;
  position: absolute;
  content: "";
  display: block;
  left: 0px;
  bottom: 0px;
  z-index: 1;
  transition: all 0.25s ease-in-out;
}

.menu_table .dropdown-menu>li>a:hover::after {
  height: 29px;
}

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
}

.dropdown-submenu>a::before {
  color: #fff;
  content: '▸';
  position: absolute;
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="menu_table">
        <ul>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">ποδοσφαιρο</a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Α.Ο.Κ Χανίων</a></li>
               <li><a href="#">Α.Ο Κύδων</a></li>
               <li><a href="#">ΕΣΑΣΚ</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li class="dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">ποδοσφαιρο</a>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                 </ul>
               </li>
               <li class="dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">ποδοσφαιρο</a>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                 </ul>
               </li>
               <li class="dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">ποδοσφαιρο</a>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                   <li><a href="#">Α.Ο Ακρωτήρι</a></li>
                 </ul>
               </li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
            </ul>
          </li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">μπασκετ</a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Α.Ο.Κ Χανίων</a></li>
               <li><a href="#">Α.Ο Κύδων</a></li>
               <li><a href="#">ΕΣΑΣΚ</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
            </ul>
          </li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">Ν.Ο Χανίων</a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Α.Ο.Κ Χανίων</a></li>
               <li><a href="#">Α.Ο Κύδων</a></li>
               <li><a href="#">ΕΣΑΣΚ</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
            </ul>
          </li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">σπορ</a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Α.Ο.Κ Χανίων</a></li>
               <li><a href="#">Α.Ο Κύδων</a></li>
               <li><a href="#">ΕΣΑΣΚ</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
            </ul>
          </li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">στήλες</a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Α.Ο.Κ Χανίων</a></li>
               <li><a href="#">Α.Ο Κύδων</a></li>
               <li><a href="#">ΕΣΑΣΚ</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
            </ul>
          </li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">βαθμολογίες</a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Α.Ο.Κ Χανίων</a></li>
               <li><a href="#">Α.Ο Κύδων</a></li>
               <li><a href="#">ΕΣΑΣΚ</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
            </ul>
          </li>
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">αποτελέσματα</a>
            <ul class="dropdown-menu" role="menu">
               <li><a href="#">Α.Ο.Κ Χανίων</a></li>
               <li><a href="#">Α.Ο Κύδων</a></li>
               <li><a href="#">ΕΣΑΣΚ</a></li>
               <li><a href="#">Α.Ο Ακρωτήρι</a></li>
            </ul>
          </li>
          <li><a href="#" style="color:red;">φωτορεπορταζ</a></li>
          <li><a href="#">προγραμμα</a></li>
        </ul>
      </div>

Answer 1

将max-height: 408px;添加到第一个.dropdown-menu以防止重排。

将子菜单下拉菜单修改为 3 列宽度并增加 top: 10px;。

将鼠标悬停在一个 bootstrap 带有子菜单的子菜单项上会重新排列父列表项

Hovering over one bootstrap sub-menu item with sub-menu rearranges parent list items

html

jquery

hover

drop-down-menu

bootstrap-4