I am creating a navigation bar for my website. One of the items has a sub-sub-menu and for some reasons, it is always expanded and it hides the rest of the sub-menu as it drops down and I can't manage to make it drop to the right side.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Nos Projets <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Soutien à nos familles parrainées</li>
<li class="sub-item-menu"><a href="bourse.php">Bouse d'étude universitaire</a></li>
<li class="sub-item-menu"><a href="habitat.php">Amélioration de l'habitat</a></li>
<li class="divider"></li>
<li class="dropdown-header">Autres projets</li>
<li class="sub-item-menu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Construction d'écoles <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li class="sub-item-menu"><a href="meovac2.php">Meo-Vac 2015-2016</a></li>
<li class="sub-item-menu"><a href="meovac.php">Meo-Vac 2013-2014</a></li>
</ul>
</li>
<li class="sub-item-menu"><a href="phuctue.php">Phuc Tue</a></li>
<li class="sub-item-menu"><a href="bluedragon.php">Blue Dragon</a></li>
<li class="sub-item-menu"><a href="sob.php">School on the Boat</a></li>
<li class="divider"></li>
<li><a href="archives.php">Archives</a></li>
</ul>
</li>
I have used the dropdown-menu-right but that doesn't seem to do anything. Any advice on how to make it drop on the right?
In currently, the .dropdown-menu has some style rules that make it stay at left include:
left: 0;
float: left;
You need to override those rules to have dropdown to right. Example:
left: auto;
right: 0;
float: right;