时间戳

首页 > 解决方案 > 鼠标悬停在左侧时如何将Bootstrap子下拉菜单修复

html - 鼠标悬停在左侧时如何将Bootstrap子下拉菜单修复

问题描述

我有一个像这样的下拉菜单。

<li class="nav-item flyout">
    <a href="#" class="nav-link  dropdown-toggle nav_sp_clr {{#ifpage 'quicklink'}}active{{/ifpage}}">Quick Links</a>
          <ul class="flyout-content nav stacked ">

              <li class="flyout-alt my-flyout-alt nav-sub-menu">
                    <a href="jobs.html" target="_blank" >Jobs</a>
              </li>

              <li class="flyout-alt my-flyout-alt nav-sub-menu  ">
                    <a href="uploads/MBA-Workshop.pdf" download="">NIRF</a>
                      <ul class="flyout-content nav stacked ">
                        <li><a href=#>ENGINEERING</a></li>
                        <li><a href=#>MANAGEMENT</a></li>
                        <li><a href=#>OVERALL</a></l]i>
                      </ul>
             </li>    
          </ul>
</li>

这是我的 CSS 类代码

.flyout, .flyout-alt{
          position:relative;
       }
      .flyout-content{
          position:absolute;
          top:100%;
          left:-99999px;
       }
.flyout:hover > .flyout-content{
    left:0;
}

.flyout-alt > .flyout-content{
    top:0;
    left:-99999px;
}
.flyout-alt:hover > .flyout-content{
    top:0;
    left:100%;
}
.flyout-content li a{
           color: #193e5a;
           display: block;
            background: #fff;
            text-align: center;
            font-size: 12px;
 }

.flyout-content li a:hover{
    background-color: #c3c3c3;
  }
.flyout-content li:hover{
          background-color: #c3c3c3;
 }
 .my-flyout-alt{
      color: #193e5a;    
 }
.nav-sub-menu{
         width: 135px;
 }
 .nav-sub-menu li:hover{
       width: 135px;
  }
   .my-flyout-alt ul{
           text-align: center;
            background: #fff;
   }

这是我的全部代码。请尝试理解并回答我的问题。我想要的是当我将鼠标悬停在 NIRF 链接上时，子菜单必须位于左侧，而不是右侧。

我尝试了左 CSS 属性，但它没有像预期的那样工作。

提前致谢。

标签： htmlcssbootstrap-4

解决方案

两种解决方案

  1. 将此添加到您的CSS
 .my-flyout-alt:hover > .flyout-content{
        top: 20px ;
        left: -10% ;
 }

或者

  1. 改变
.flyout-alt:hover > .flyout-content

到

.flyout-alt:hover > .flyout-content{
    top:20px;
    left:-10%;
}

并根据您的需要更改剩余百分比。

干杯!

推荐阅读