title: TypeError: jQuery(...).superfish is not a function. ul.sf-menu
body: <p>I have seen <a href="https://stackoverflow.com/questions/8534758/jquery-superfish-error-jqueryul-sf-menu-superfish-is-not-a-function">jQuery SuperFish Error: jQuery(“ul.sf-menu”).superfish is not a function</a> and this <a href="https://stackoverflow.com/questions/27114418/typeerror-jquery-superfish-is-not-a-function">TypeError: jQuery(…).superfish is not a function</a> post, I tried the suggestion given in comments and answers, but none worked for me. </p>
  
  <p>I simply want the submenu to appear with a delay on mouse hover. I spend so much time but could not figure out the reason. </p>
  
  <p>I am using superfish to add delay in the appearance of sub-menus. But its not working and in Mozilla-Firebug I get the error mentioned in title of question. </p>
  
  <p>Here is the html code and snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*** ESSENTIAL STYLES ***/
  
  .sf-menu,
  .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sf-menu li {
    position: relative;
  }
  .sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
  }
  .sf-menu &gt; li {
    float: left;
  }
  .sf-menu li:hover &gt; ul,
  .sf-menu li.sfHover &gt; ul {
    display: block;
  }
  .sf-menu a {
    display: block;
    position: relative;
  }
  .sf-menu ul ul {
    top: 0;
    left: 100%;
  }
  /*** DEMO SKIN ***/
  
  .sf-menu {
    float: left;
    margin-bottom: 1em;
  }
  .sf-menu ul {
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
    min-width: 12em;
    /* allow long menu items to determine submenu width */
    *width: 12em;
    /* no auto sub width for IE7, see white-space comment below */
  }
  .sf-menu a {
    border-left: 1px solid #fff;
    border-top: 1px solid #dFeEFF;
    /* fallback colour must use full shorthand */
    border-top: 1px solid rgba(255, 255, 255, .5);
    padding: .75em 1em;
    text-decoration: none;
    zoom: 1;
    /* IE7 */
  }
  .sf-menu a {
    color: #13a;
  }
  .sf-menu li {
    background: #BDD2FF;
    white-space: nowrap;
    /* no need for Supersubs plugin */
    *white-space: normal;
    /* ...unless you support IE7 (let it wrap) */
    -webkit-transition: background .2s;
    transition: background .2s;
  }
  .sf-menu ul li {
    background: #AABDE6;
  }
  .sf-menu ul ul li {
    background: #9AAEDB;
  }
  .sf-menu li:hover,
  .sf-menu li.sfHover {
    background: #CFDEFF;
    /* only transition out, not in */
    -webkit-transition: none;
    transition: none;
  }
  /*** arrows (for all except IE7) **/
  
  .sf-arrows .sf-with-ul {
    padding-right: 2.5em;
    *padding-right: 1em;
    /* no CSS arrows for IE7 (lack pseudo-elements) */
  }
  /* styling for both css and generated arrows */
  
  .sf-arrows .sf-with-ul:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1em;
    margin-top: -3px;
    height: 0;
    width: 0;
    /* order of following 3 rules important for fallbacks to work */
    border: 5px solid transparent;
    border-top-color: #dFeEFF;
    /* edit this to suit design (no rgba in IE8) */
    border-top-color: rgba(255, 255, 255, .5);
  }
  .sf-arrows &gt; li &gt; .sf-with-ul:focus:after,
  .sf-arrows &gt; li:hover &gt; .sf-with-ul:after,
  .sf-arrows &gt; .sfHover &gt; .sf-with-ul:after {
    border-top-color: white;
    /* IE8 fallback colour */
  }
  /* styling for right-facing arrows */
  
  .sf-arrows ul .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #dFeEFF;
    /* edit this to suit design (no rgba in IE8) */
    border-left-color: rgba(255, 255, 255, .5);
  }
  .sf-arrows ul li &gt; .sf-with-ul:focus:after,
  .sf-arrows ul li:hover &gt; .sf-with-ul:after,
  .sf-arrows ul .sfHover &gt; .sf-with-ul:after {
    border-left-color: white;
  }
  /*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
  
  .sf-navbar {
    background: #BDD2FF;
    position: relative;
    margin-bottom: 5em;
  }
  /* provide background colour for submenu strip */
  
  /* you should just set the menu's container bg colour rather than use pseudo-elements */
  
  .sf-navbar:before {
    content: '';
    position: absolute;
    left: 0;
    z-index: -1;
    background-color: #BDD2FF;
    height: 200%;
    width: 100%;
  }
  .sf-navbar ul {
    box-shadow: none;
  }
  .sf-navbar li {
    background: #AABDE6;
    position: static;
  }
  .sf-navbar &gt; li &gt; a,
  .sf-navbar &gt; li &gt; ul &gt; li &gt; a {
    border: none;
  }
  .sf-navbar &gt; li &gt; ul {
    min-width: 36em;
    /* set this to whatever suits your design */
  }
  .sf-navbar ul li {
    background: #BDD2FF;
    position: relative;
  }
  .sf-navbar ul ul {
    left: 0;
    top: 100%;
  }
  .sf-navbar ul ul li {
    width: 100%;
  }
  .sf-navbar &gt; li &gt; ul &gt; li {
    float: left;
  }
  .sf-navbar li.current {
    background: #BDD2FF;
  }
  .sf-navbar li:hover,
  .sf-navbar li.sfHover,
  .sf-navbar ul li.current {
    background: #BDD2FF;
  }
  .sf-navbar ul li:hover,
  .sf-navbar ul li.sfHover,
  .sf-navbar ul ul li {
    background: #D1DFFF;
  }
  .sf-navbar ul ul li:hover,
  .sf-navbar ul ul li.sfHover,
  .sf-navbar ul ul li.current {
    background: #E6EEFF;
  }
  .sf-navbar ul li.current &gt; a {
    font-weight: bold;
  }
  /*** point all arrows down ***/
  
  .sf-arrows.sf-navbar ul .sf-with-ul:after {
    margin-top: -3px;
    margin-right: 0;
    border-color: transparent;
    border-top-color: #dFeEFF;
    /* edit this to suit design (no rgba in IE8) */
    border-top-color: rgba(255, 255, 255, .5);
  }
  .sf-arrows.sf-navbar ul &gt; li &gt; .sf-with-ul:focus:after,
  .sf-arrows.sf-navbar ul &gt; li:hover &gt; .sf-with-ul:after,
  .sf-arrows.sf-navbar ul &gt; .sfHover &gt; .sf-with-ul:after {
    border-color: transparent;
    border-top-color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="css/superfish.css"&gt;
    &lt;link rel="stylesheet" href="css/superfish-navbar.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;ul class="sf-menu sf-navbar"&gt;
      &lt;li&gt;
        &lt;a class="" href=""&gt;News&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class=""&gt;
          &lt;li&gt;&lt;a href=""&gt;Add New&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Overview&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a class="" href=""&gt;Products&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class=""&gt;
          &lt;li&gt;&lt;a href=""&gt;New Product&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
  
    &lt;/ul&gt;
  
    &lt;script src="hoverIntent.js"&gt;&lt;/script&gt;
    &lt;script src="superfish.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!-- initialise Superfish --&gt;
    &lt;script&gt;
      jQuery(document).ready(function() {
        jQuery('ul.sf-menu').superfish({
          pathClass: 'current',
          delay: 1800000
        });
      });
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>