title: Why isn't my Superfish menu working properly in Firefox?
body: <p>I'm trying to use <a href="http://users.tpg.com.au/j_birch/plugins/superfish" rel="nofollow">Superfish</a> jQuery plugin to enhance a drop-down menu on a website. However, the drop-down menu doesn't open when the cursor hovers over it in Firefox browser (v. 21.0) as it should. In Chrome and Opera it works. Without the Superfish plugin the drop-down menu works also in Firefox with plain CSS.</p>
  
  <p>When using the <code>cssArrows</code> option for Superfish, the arrows don't show up in any browser (even when using more padding). I don't know if this problem is related to the first one. </p>
  
  <p>Here's my markup:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Page 2&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 2.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 2.2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Page 2.3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And here's my CSS/SASS:</p>
  
  <pre><code> nav {
      width: 100%;
      float: left;
  
      ul {
          display: block;
          float: left;
          width: 100%;
  
          li {
              position: relative;
              display: block;
              float: left;
  
              a {
                  display: block;
                  padding: 14px 14px;
              }
              /* drop-down */
              ul {
                  display: none;
                  position: absolute;
                  left: 0;
                  top: 100%;
                  padding: 0;
                  border: 1px solid #aaa;
                  border-top-width: 0;
  
                  li {
                      float: none;
                      a {
                          padding: 8px 3px;
                          border-top: 1px solid #aaa;
                      }
                  }
              }
  
              &amp;:hover,
              &amp;.sfHover {
                  ul {
                      display: block;
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>Here's my Superfish call:</p>
  
  <pre><code>$('nav').superfish();
  </code></pre>
  
  <p>In Firefox, when I hover over the <code>li</code> tag that holds the second level menu, the <code>li</code> doesn't get <code>sfHover</code> class as should happen. Instead, the top-level <code>ul</code> gets <code>sfHover</code> class assigned to it. Then, when I press left mouse button down on that <code>li</code> tag, it gets the 'sfHover' tag and the drop-down menu shows up. In Chrome and Opera <code>sfHover</code> class gets assigned to the right elements.</p>
  
  <p>The examples from Superfish plugin's site work also in my Firefox browser but they didn't help me to solve this. My html markup for the menu is almost the same as in those examples.</p>
  
  <p>I've tried to</p>
  
  <ul>
  <li>assign z-indexes to different elements, but it didn't help (didn't expect to). Currently
  no element on the page has z-index assigned to it.</li>
  <li>assign widths on <code>li</code> and <code>a</code> elements since I had read that it had
  helped in some problem situations.</li>
  <li>use the stylesheets from Superfish examples but they didn't work any better.</li>
  <li>hide the drop-down menu with <code>margin-left: -9999px</code> instead of
  <code>display: none</code> but that didn't help.</li>
  <li>use all options when initializing Superfish</li>
  <li>use <code>position: relative</code> on <code>a</code> tags instead of on <code>li</code> tags </li>
  </ul>
  
  <p>I've also checked that my html validates.</p>
  
  <p>Can anyone figure out what's the problem? I'd greatly appreciate any suggestions.</p>