I'm facing an unusual problem with Firefox while developing a menu that has a maximum of three levels. The issue seems to be isolated to Firefox as everything works perfectly in Chrome. When I click on 'First Level Menu', a ul opens with two elements, and then clicking on 'Second Level Menu' causes the background-color to change from gray to dark gray.
Here is the CSS code:
.leftpanel
{
width: 230px;
float: left;
background-color: #282828;
}
.leftpanel>ul
{
padding-top: 10px;
}
...
This is where the issue occurs in the HTML:
<li class="expand">
<a href="#">First Level Menu</a>
<ul>
<li class="expand">
<a href="#">Second Level Menu</a>
...
</ul>
</li>
You can view the behavior here http://jsfiddle.net/qWLTS/
I would greatly appreciate any assistance in resolving this frustrating issue.