Как исправить выпадающее меню Bootstrap слева при наведении на него мыши

Question

У меня есть меню с таким раскрывающимся списком.

<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, но оно не работает так, как ожидалось.

Заранее спасибо.

Answer 1

.flyout, .flyout-alt{
          position:relative;
       }
.flyout-content{
          position:absolute;
          top:100%;
          left:-99999px;
       }
.staked li{
  width: 100%;
  display: flex;
}
.staked{
  display: flex;
  flex-direction: column;
 }
.flyout:hover > .flyout-content{
    left:0;
}

.flyout-alt > .flyout-content{
    top:0;
    left:-99999px;
}
.flyout-alt:hover > .flyout-content{
    top: 100%;
    left:0;
}
.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{
  width: 135px;
 }
 .nav-sub-menu li:hover{
       width: 100%;
  }
   .my-flyout-alt ul{
           text-align: center;
            background: #fff;
   }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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></li>
                      </ul>
             </li>    
          </ul>
</li>

Answer 2

Два решения

1. Добавьте это к вашему CSS

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

ИЛИ

Измените

.flyout-alt:hover > .flyout-content

на

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

и измените процент left в соответствии с вашими потребностями.

Cheers!