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

Posted 2023-05-08

技术标签:

【中文标题】将鼠标悬停在一个带有子菜单的引导子菜单项上会重新排列父列表项【英文标题】：Hovering over one bootstrap sub-menu item with sub-menu rearranges parent list items 【发布时间】：2020-01-17 12:05:44 【问题描述】：

我已经设置了一个可以在悬停时使用的引导下拉菜单。第一个下拉列表有 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>

【问题讨论】：

【参考方案1】：

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

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

【讨论】：

确实 max-height 修复了重新排列，top:10px; 修复了之后的子菜单。

以上是关于将鼠标悬停在一个带有子菜单的引导子菜单项上会重新排列父列表项的主要内容，如果未能解决你的问题，请参考以下文章

带有悬停子菜单的固定菜单有点关闭

在带有子菜单的菜单上需要有关 JQuery 鼠标悬停的帮助

单击后关闭悬停子菜单而不刷新页面

带有水平子菜单的纯 html css 菜单。悬停在 IE 中无法正常工作

在导航引导解释中隐藏子菜单

ASP 动态菜单子菜单鼠标悬停在子菜单上时消失。