Menu icon Foundation
drop down menu appearing on wrong side

hi guys i've got a nested drop down menu but when i hover over the second drop down the next drop down appears on the left side instead of the right. I would like it to appear on the right side, how can i fix this?

Current code and link: ops.emsofl.com

 <ul class="right">
              <li class="has-dropdown"> 
              <a href="#">Schools</a>
               <ul class="dropdown"> 
                <li class="has-dropdown">
                    <a href="#">OFL Courses</a>
                    <ul class="dropdown">
                      <li><a href="/courses/OFL/math.php">Math</a></li>
                      <li><a href="/courses/ofl/english.php">English</a></li>
                      <li><a href="/courses/ofl/science.php">Sciences</a></li>
                      <li><a href="/courses/ofl/worldLanguage.php">World Languages</a></li>
                      <li><a href="/courses/ofl/socialScience.php">Social Sciences</a></li>
                      <li><a href="/courses/ofl/electives.php">Electives</a></li>
                    </ul>
                  </li>
                  <li class="has-dropdown">
                    <a href="#">OFY Courses</a>
                    <ul class="dropdown">
                      <li><a href="/courses/OFY/math.php">Math</a></li>
                      <li><a href="/courses/ofy/english.php">English</a></li>
                      <li><a href="/courses/ofy/science.php">Sciences</a></li>
                      <li><a href="/courses/ofy/worldLanguage.php">World Languages</a></li>
                      <li><a href="/courses/ofy/socialScience.php">Social Sciences</a></li>
                      <li><a href="/courses/ofy/electives.php">Electives</a></li>
                    </ul>
                  </li>
                  <li class="has-dropdown">
                    <a href="#">PIE Courses</a>
                    <ul class="dropdown">
                      <li><a href="/courses/pie/math.php">Math</a></li>
                      <li><a href="/courses/pie/english.php">English</a></li>
                      <li><a href="/courses/pie/science.php">Sciences</a></li>
                      <li><a href="/courses/pie/worldLanguage.php">World Languages</a></li>
                      <li><a href="/courses/pie/socialScience.php">Social Sciences</a></li>
                      <li><a href="/courses/pie/electives.php">Electives</a></li>
                    </ul>
                  </li>
                  </ul>
                </li>
                  
                 <li><a href="/courses/classlist.php">Digital Study Sheets</a></li>
                  <li><a href="/edtech.php">Ed Tech</a></li>                  
<!--              <li><a href="/contact.php">Contact us</a></li>-->
                  <li><a href="/training.php">Training</a></li>
                  <li><a href="/faqs.php">FAQs</a></li>
                  <li><a href="/aboutus.php">About us</a></li>
                   <li><a href="../onlineregpap.php">Online Registration Paperwork</a></li>
                  

                </ul>
            

         

nav

hi guys i've got a nested drop down menu but when i hover over the second drop down the next drop down appears on the left side instead of the right. I would like it to appear on the right side, how can i fix this?

Current code and link: ops.emsofl.com

 <ul class="right">
              <li class="has-dropdown"> 
              <a href="#">Schools</a>
               <ul class="dropdown"> 
                <li class="has-dropdown">
                    <a href="#">OFL Courses</a>
                    <ul class="dropdown">
                      <li><a href="/courses/OFL/math.php">Math</a></li>
                      <li><a href="/courses/ofl/english.php">English</a></li>
                      <li><a href="/courses/ofl/science.php">Sciences</a></li>
                      <li><a href="/courses/ofl/worldLanguage.php">World Languages</a></li>
                      <li><a href="/courses/ofl/socialScience.php">Social Sciences</a></li>
                      <li><a href="/courses/ofl/electives.php">Electives</a></li>
                    </ul>
                  </li>
                  <li class="has-dropdown">
                    <a href="#">OFY Courses</a>
                    <ul class="dropdown">
                      <li><a href="/courses/OFY/math.php">Math</a></li>
                      <li><a href="/courses/ofy/english.php">English</a></li>
                      <li><a href="/courses/ofy/science.php">Sciences</a></li>
                      <li><a href="/courses/ofy/worldLanguage.php">World Languages</a></li>
                      <li><a href="/courses/ofy/socialScience.php">Social Sciences</a></li>
                      <li><a href="/courses/ofy/electives.php">Electives</a></li>
                    </ul>
                  </li>
                  <li class="has-dropdown">
                    <a href="#">PIE Courses</a>
                    <ul class="dropdown">
                      <li><a href="/courses/pie/math.php">Math</a></li>
                      <li><a href="/courses/pie/english.php">English</a></li>
                      <li><a href="/courses/pie/science.php">Sciences</a></li>
                      <li><a href="/courses/pie/worldLanguage.php">World Languages</a></li>
                      <li><a href="/courses/pie/socialScience.php">Social Sciences</a></li>
                      <li><a href="/courses/pie/electives.php">Electives</a></li>
                    </ul>
                  </li>
                  </ul>
                </li>
                  
                 <li><a href="/courses/classlist.php">Digital Study Sheets</a></li>
                  <li><a href="/edtech.php">Ed Tech</a></li>                  
<!--              <li><a href="/contact.php">Contact us</a></li>-->
                  <li><a href="/training.php">Training</a></li>
                  <li><a href="/faqs.php">FAQs</a></li>
                  <li><a href="/aboutus.php">About us</a></li>
                   <li><a href="../onlineregpap.php">Online Registration Paperwork</a></li>
                  

                </ul>
            

         

This post has been closed. No new replies can be added.

Ryan Hellerud over 4 years ago

Well i was able to edit the _topbar.scss file and it works great. thanks

Rafi Benkual over 4 years ago

What I mean is that you can add the dropdown to the <ul class="left"> and position it where you want. Then the menu will flow towards the right. Otherwise, you can override the JS that positions it.

Ryan Hellerud over 4 years ago

do you mean i should change the ul class= right to class = left? Seems counter-intuitive

Rafi Benkual over 4 years ago

The class of "right" on the dropdown determines which side the menu will go, since it will have more space to the left. You can move the dropdown to the left to make it go the other way.