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


js dropdown menu script not working as expected

l have the menu

        <ul class="myMenu">
          <li class="new-dropdown1"><a id="services" href="#" class="link-hover">Our Services</a>
            <ul class="new1">
              <li><a href="<?php echo site_url('/structural-capital');?>">Structural-Capital</a></li>
              <li><a href="<?php echo site_url('/financial-advisory');?>">Financial-Advisory</a></li>
              <li><a href="<?php echo site_url('/investment-capital');?>">Investment-Capital</a></li>

and l am using the the script below to display and hide the dropdown

    $(document).ready(function() {
    $('.myMenu > li').bind('mouseover', openSubMenu);
    $('.myMenu > li').bind('mouseout', closeSubMenu);
    function openSubMenu() {
      $(this).find('ul').css("visibility", "visible").slideDown();
    function closeSubMenu() {
      $(this).find('ul').css("visibility", "hidden").slideUp();

l am having this issue where sometimes the <a>services</a> link becomes highlighted but does not show the dropdown. Also when you mouse over the link from below the dropdown does not appear. Any work around that you can think of guys? Andrew Chalkley Dave McFarland Thanks in advance

Would substituting mouseover and mouseout with mouseenter and mouseleave make any difference?

Floris Creyf narr not really mate it still have that effect. its so weird why its behaving like that

Can you post your CSS for this as well so that we can replicate it as you have it?

Don't you need to define your functions before you call them?

here guys thanks

/* line 1164, ../scss/_custom.scss */
li.new-dropdown, li.new-dropdown1 {
  position: relative;

/* line 1167, ../scss/_custom.scss */
ul.new, ul.new1 {
  position: absolute;
  display: none;
  top: 72px;
  z-index: 100;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #FFF02A;

/* line 1177, ../scss/_custom.scss */
.myMenu li ul {
  display: none;
  white-space: nowrap;

/* line 1181, ../scss/_custom.scss */
ul.new li > a, ul.new1 li > a {
  color: #000;
  width: 100%;
  /*border-bottom: 1px solid black;*/

/* line 1186, ../scss/_custom.scss */
ul.new li > a:hover, ul.new1 li > a:hover {
  color: #000 !important;
  font-weight: bold;

/* line 1190, ../scss/_custom.scss */
ul.new li > a.active, ul.new1 li > a.active {
  color: #000 !important;
  font-family: 'Neuzeit Grotesk W01';
  font-weight: 700;
  font-style: normal;
  font-weight: boldder;

Matt Brock, no because javascript hoists functions to the top of the scope.

Floris: Gotcha. That's helpful to know!

3 Answers

Jeff Everhart
Jeff Everhart
21,732 Points

In the jQuery docs, it says that as of v1.7 the bind method has since been replaced by the on method as the preferred way to attach event handler: https://api.jquery.com/bind/

There are also other shortcut methods that you can use like mouseenter, mouseleave, etc. that could take a callback function:https://api.jquery.com/?s=mouseout

My last suggestion may be to use actual css selectors to select your DOM elements. Ex. $("myMenu li") not $("myMenu > li")

If the caret is actually a part of the selector, which in this case it looks like it's not, you'd need to escape it for it to work: http://api.jquery.com/category/selectors/

Lastly, while Floria is technically right about the function hoisting, most people like to define functions before calling them. It just makes the code easier to read, but this is mostly personal preference on my part I guess.

I was able to get it to work here in a CodePen, but it doesn't seem to be taking your CSS: http://codepen.io/JEverhart383/pen/bddRWP

For what it's worth you could likely create the same effect with CSS3 transitions instead of relying on JS for it.

Taking Jeff Everhart's advice in consideration, I created a JSFiddle at http://jsfiddle.net/8pepy0vL/. From what I gather, the top: 72px; moves the dropdown menu outside #services so that the dropdown disappears when attempting to move the cursor down to one of the links.

thanks guys. l only put a top 72 because i am trying to move the dropdown below the hover item. the idea is to get the dropdown to sit on a line that i created with using an after pseudo-class.

So instead of top, something like the following should be fine?

.myMenu > li > a {
        display: block;
        height: 100%;


when you have a peek at this nav here it needs to be abit below and sit on the yellow line that. i need something to push it down thats why i used top. couldnt think of any other way. can you mate? ending up with something like this http://imgur.com/JtNEQ3P