I've just recently started programming, I was hoping for some help.

I have a drop down menu that was originally activated by click_event, however I want to now implement hoverIntent in order to make the menu drop.

The issue I am having now is being able to use the menu, because whenever I invoke the menu now, once I leave the area that activates the menu, the menu closes. If you could explain to me like I'm five, I'd appreciate it, thanks :)

The code I am using as follows:

JavaScript:

    function setupUserConfigMenu() {
        $('.user_profile_btn').hoverIntent(
            function (event) {
                $('#user_settings_dropdown').animate({height:['toggle', 'swing']
            }, 225);
            },
            function (event) {
                $('#user_settings_dropdown').animate({height:['toggle', 'swing']
            }, 225);

            })
    }

HTML:

    <li>
        <a href="<%= "#" %>" class="user_profile_btn" title="Your profile page"><%= truncate(current_user.full_name || current_user.name, :length => 28) %>
          <div class="arrow_down"></div></a>

        <ul id="user_settings_dropdown">
          <li>
            <a href="<%= current_user.get_url(true) %>">
              <%= image_tag current_user.get_thumb_url, :size => "30x30" %>
              <div>
                <%= truncate(current_user.full_name || current_user.name, :length => 40) %>
                <br>
                View profile
              </div>
            </a>
          </li>

          <div class="grey_line"></div>

          <li class="settings_list_item">
            <%= link_to "Settings", edit_user_registration_path %>
          </li>
          <li class="settings_list_item">
            <%= link_to "About", "/about" %>
          </li>
          <li class="settings_list_item">
            <%= link_to "Logout", destroy_user_session_path, :method => :delete %>
          </li>
        </ul>
      </li>