fadeToggle() fails on chrome/safari due to display block on <a> tag
<p><a href="http://jsfiddle.net/GGsEt/3/" rel="nofollow">http://jsfiddle.net/GGsEt/3/</a></p>

<h3>Works on firefox</h3>

<p>HTML</p>

<pre><code>&lt;ul&gt;
    &lt;li class="lib_undefined"&gt;
       &lt;span class="hidden_toggle"&gt;
           &lt;a href="/"&gt;Test&lt;/a&gt;
       &lt;/span&gt;
    &lt;/li&gt;
&lt;/ul&gt;
​
</code></pre>

<p>CSS</p>

<pre><code>.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;
}
</code></pre>

<p>jQuery</p>

<pre><code>$('.lib_undefined').hover(function(){
     $(this).children('.hidden_toggle').fadeToggle();
});​
</code></pre>

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