I'm working on a menu that has a dropdown feature, and here is a snippet of the code:
<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>
Additionally, I have defined CSS classes to style the menu accordingly:
.flyout, .flyout-alt{
position:relative;
}
.flyout-content{
position:absolute;
top:100%;
left:-99999px;
}
...
...
I've been trying to make a specific adjustment to the submenu behavior when hovering over the "NIRF" link. I want the submenu to appear on the left side instead of the right side. I've attempted using the left CSS property, but it's not achieving the desired outcome.
If anyone has insights or suggestions on how to achieve this effect, I would greatly appreciate the assistance!