I am currently experimenting with the Superfish jQuery plugin to improve a drop-down menu on my website. Unfortunately, in Firefox browser (v. 21.0), the drop-down menu does not open when hovering over it as expected. However, it works fine in Chrome and Opera. Interestingly, without the Superfish plugin, the drop-down menu functions correctly in Firefox using plain CSS.
Additionally, when utilizing the cssArrows option for Superfish, the arrows do not display in any browser, even after adding more padding. I am uncertain if this problem is related to the previous one.
Below is a snippet of my markup:
<nav>
<ul>
<li><a href="#">Page 1</a></li>
<li>
<a href="#">Page 2</a>
<ul>
<li><a href="#">Page 2.1</a></li>
<li><a href="#">Page 2.2</a></li>
<li><a href="#">Page 2.3</a></li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</nav>
Furthermore, here is the CSS/SASS code I am using:
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;
}
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;
}
}
}
&:hover,
&.sfHover {
ul {
display: block;
}
}
}
}
}
The Superfish call I am making:
$('nav').superfish();
Moreover, in Firefox, I noticed that when hovering over the second-level menu's li tag, the correct behavior of adding the sfHover class does not occur. Instead, the top-level ul receives the sfHover class. Clicking on the li tag eventually triggers the appearance of the drop-down menu. This issue is not present in Chrome or Opera where the correct elements receive the sfHover class upon hovering.
Although examples from the Superfish plugin's site work well in Firefox, they did not provide a solution to my problem despite similarities in the HTML markup.
Some solutions I have attempted include:
- Setting z-indexes for various elements (which did not yield results)
- Assigning widths to
liandaelements based on recommendations from other sources - Experimenting with different stylesheets provided by Superfish examples
- Attempting to hide the drop-down menu using
margin-left: -9999pxinstead ofdisplay: none - Utilizing all available options during Superfish initialization
- Applying
position: relativetoatags instead oflitags
I have also confirmed that my HTML code passes validation checks.
If anyone has suggestions or insights into what might be causing these issues, I would greatly appreciate your input.