title: Rails 3: my jquery for drop menu not working, causing other js to not work
body: <p>I'm new to jquery but I'm trying to learn. I'm working with a drop down button that works just fine in jsfiddle. However, when I try it in my rails 3 app, it won't work. (nothing drops down when you click the link).</p>
  
  <p>If I remove the line $(".menu").fixedMenu(); and add it into the html like this it works. I'm stumped as to why its not working like the jsfiddle example</p>
  
  <pre><code>&lt;script&gt;
          $('document').ready(function(){
              $('.menu').fixedMenu();
          });
          &lt;/script&gt;
  </code></pre>
  
  <p>Would really appreciate any help or insights.</p>
  
  <p>working jsfiddle: <a href="http://jsfiddle.net/rKaPN/32/" rel="nofollow">http://jsfiddle.net/rKaPN/32/</a></p>
  
  <p>application.js</p>
  
  <pre><code>(function ($) {
  $.fn.fixedMenu = function () {
      return this.each(function () {
        var menu = $(this);
          $("html").click(function() {
          menu.find('.drop-down').removeClass('drop-down');
        });
        menu.find('ul li &gt; a').bind('click',function (event) {
              event.stopPropagation();
          //check whether the particular link has a dropdown
          if (!$(this).parent().hasClass('single-link') &amp;&amp; !$(this).parent().hasClass('current')) {
            //hiding drop down menu when it is clicked again
            if ($(this).parent().hasClass('drop-down')) {
              $(this).parent().removeClass('drop-down');
            }
            else {
              //displaying the drop down menu
              $(this).parent().parent().find('.drop-down').removeClass('drop-down');
              $(this).parent().addClass('drop-down');
            }
          }
          else {
            //hiding the drop down menu when some other link is clicked
            $(this).parent().parent().find('.drop-down').removeClass('drop-down');
  
        }
        })
      });
    }
    $(".menu").fixedMenu();
    })(jQuery);
  
  $(function() {
      $("div.post_form").hide();
  
      $("input[name$='post[category_id]']").click(function() {
  
  
          $("div.post_form").hide();
          $("#extra").show("slow")
      });
  });
  
  $(function(){
          $('a.tab_link').click(function(){
            $('a.tab_link').removeClass('active')
            $(this).addClass('active')
          });
        });
  </code></pre>
  
  <p>application_layout.html.erb</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;&lt;%= title %&gt;&lt;/title&gt;
        &lt;%= csrf_meta_tag %&gt; 
        &lt;!--[if lt IE 9]&gt;
        &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
        &lt;![endif]--&gt;
        &lt;%= stylesheet_link_tag 'blueprint/screen', :media =&gt; 'screen' %&gt;
        &lt;%= stylesheet_link_tag 'blueprint/print',  :media =&gt; 'print' %&gt;
        &lt;%= stylesheet_link_tag 'token-input-facebook' %&gt;
        &lt;!--[if lt IE 8]&gt;&lt;%= stylesheet_link_tag 'blueprint/ie' %&gt;&lt;![endif]--&gt;
        &lt;%= stylesheet_link_tag 'custom', :media =&gt; 'screen' %&gt;
        &lt;%= javascript_include_tag :defaults %&gt;
  
  
      &lt;/head&gt;
  
      &lt;body style="&lt;%= check_user %&gt;"&gt;
  
      &lt;header&gt;
  
  
      &lt;div class="menu"&gt;
          &lt;div class="container-margin"&gt;
          &lt;ul&gt;
               &lt;li&gt;&lt;%= link_to "Home", root_path, :class =&gt; "single_link" %&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt; &lt;%= link_to "Profile", root_path, :class =&gt; "single_link" %&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt; &lt;%= link_to "Blog", root_path, :class =&gt; "single_link" %&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
               &lt;li class="menu-right"&gt;
                 &lt;a href="#"&gt;More&lt;span class="arrow"&gt;&lt;/span&gt;&lt;/a&gt;
                 &lt;!-- Drop Down menu Items --&gt;
                  &lt;ul&gt;
                 &lt;li&gt;&lt;a href="http://www.google.co.in/reader"&gt;Reader Reader Reader&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://sites.google.com"&gt;Sites&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://groups.google.co.in"&gt;Groups&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.youtube.com"&gt;YouTube&lt;/a&gt;&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
        &lt;div id="header-two"&gt;
          &lt;div class="container"&gt;
              &lt;div id="logo"&gt;&lt;%= link_to logo, root_path %&gt;&lt;/div&gt;
              &lt;div id="search"&gt;
                         &lt;%= form_tag search_posts_path, :method =&gt; :get do %&gt;
                         &lt;%= submit_tag "", :name =&gt; nil, :class =&gt; "search-button" %&gt;
                         &lt;%= text_field_tag :q, params[:q], :class =&gt; "search-box round-3" %&gt;
                      &lt;% end %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/header&gt;
  </code></pre>
  
  <p>custom.css </p>
  
  <pre><code>#header-two {
      background:#fff;
      height: 74px;
      border-bottom: solid 1px #ececec;   
  }
  .container-margin {
      width: 1034px;
      margin: 0 auto;
      position: relative;
  }
  .menu{
  position::absolute;
  top:0;
  left:0;
  width:100%;
  font:13px/27px Arial,sans-serif;
  color:#999;
  height:30px;
  background:blue;
  }
  .menu a:hover{
  background-color:#676767;
  color:#CCCCCC;
  }
  .menu a{
  text-decoration:none;
  padding:6px 8px 7px;
  color:#CCCCCC;
  outline:none;
  }
  .menu ul{
  list-style:none;
  margin:0;
  padding:0 0 0 10px;
  }
  .menu ul li{
  padding:0;
  float:left;
  }
  .menu ul li.menu-right{
  float:right;
  }
  
  .menu ul li ul li{
  padding:0;
  float:none;
  margin:0 0 0 0px;
  width:100%;
  }
  .menu ul li ul{
  position:absolute;
  right: 0px;
  border:1px solid #C3D1EC;
  /*box-shadow*/
  -webkit-box-shadow:0 1px 5px #CCCCCC;
     -moz-box-shadow:0 1px 5px #CCCCCC;
          box-shadow:0 1px 5px #CCCCCC;
  margin-top:-1px;
  display:none;
  padding:0px 16px 0px 0;
  }
  .drop-down ul{
  display:block !important;
  position:relative;
  }
  .drop-down a{
  background-color:white;
  border:1px solid #C3D1EC;
  border-bottom:0;
  /*box-shadow*/
  -webkit-box-shadow:0 -1px 5px #CCCCCC;
     -moz-box-shadow:0 -1px 5px #CCCCCC;
          box-shadow:0 -1px 5px #CCCCCC;
  display:block;
  height:29px;
  padding:0 8px 0 8px;
  position:relative;
  z-index:1;
  color:#3366CC;
  }
  .drop-down a:hover{
  background-color:white;
  color:#3366CC;
  }
  .drop-down ul a:hover{
  background-color:#e4ebf8;
  }
  .drop-down ul a{
  border:0 !important;
  /*box-shadow*/
  -webkit-box-shadow:0 0 0 #CCCCCC;
     -moz-box-shadow:0 0 0 #CCCCCC;
          box-shadow:0 0 0 #CCCCCC;
  border:0;
  width:100%;
  }
  
  .arrow {
  border-color:#C0C0C0 transparent white;
  border-style:solid dashed dashed;
  margin-left:5px;
  position:relative;
  top:10px;
  }
  .mid-line{
  background-color:#FFF;
  border-top:1px solid #e5e5e5;
  font-size:0;
  }
  </code></pre>