Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Ryan Hellerud
Ryan Hellerud
3,635 Points

zurb foundation nav bar question

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>

4 Answers

Michael Choi
Michael Choi
6,332 Points
Michael Choi
Michael Choi
6,332 Points

Ryan!!! app.css line: 20291

.top-bar-section .right li .dropdown {
/* left: auto; */
right: auto;
}

That should work!

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

Haha, Hi Michael, Thanks :)

Michael Choi
Michael Choi
6,332 Points

Yeah man!

Ryan Hellerud
Ryan Hellerud
3,635 Points

Im using scss tried adding that line but it didnt work. do I have to modify the css file itself?

Michael Choi
Michael Choi
6,332 Points

Have you tried changing at Zurb's app.css?

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

yes i just did it that way and it worked fine, thanks!

Michael Choi
Michael Choi
6,332 Points

Sweet!

Ryan Hellerud
Ryan Hellerud
3,635 Points
Ryan Hellerud
Ryan Hellerud
3,635 Points

the only problem with editing the css file is it seems to re-write the file when i make changes to the scss file bringing back the css line to defualt. Thats why im trying to see how to edit the settings files or something like that,

Ryan Hellerud
Ryan Hellerud
3,635 Points

never mind i found it. had to edit the _top-bar.scss file