Question

http://jsfiddle.net/GGsEt/3/

Works on firefox

HTML

<ul>
    <li class="lib_undefined">
       <span class="hidden_toggle">
           <a href="/">Test</a>
       </span>
    </li>
</ul>
​

CSS

.hidden_toggle{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: #999;
    line-height: 80px;
    display: none;
}
    .hidden_toggle a{
        color: #999;
        border: none;
        display: block;
        width: 100%;    
        height: 90px;
    }

.lib_undefined{
    min-height: 90px;
    border: 1px solid #000;
}

jQuery

$('.lib_undefined').hover(function(){
     $(this).children('.hidden_toggle').fadeToggle();
});​

Any known fixes? The a tag needs to fill the entire li, which is why display is set to block.

Answer 1

When fadeToggle() works it added display: inline CSS to fade element. You may use some block element such as div/ p to wrap your a.

Just use

display: inline-block to .hidden_toggle a and hope your problem will solve.

ie.

.hidden_toggle a {
    color: #999;
    border: none;
    display: inline-block; // change here
    width: 100%;    
    height: 90px;
}

DEMO

Note

Though display: inline-block will fails for older IE versions.