jquery menu opacity fadeToggle

Question

I have a fadeToggle submenu but if the mouse is left hovering over the submenu, text from the underlying page ends up above it.

<script type="text/javascript">

$(document).ready(function() {
    $('li').hover(function() {
        $(this).find('ul>li').stop().fadeToggle(800);


});
});
</script>

Answer 1

As I said, the issue was caused by the opacity. Most likely it was conflicting with some other css. I updated your sub li style to be like this:

ul li li {
    background:#999;
    text-decoration:none;
    color:#fff;
    display:none;   
    opacity:0.999;
}

And it appears to be working fine now. Here is the updated demo: http://jsfiddle.net/drud5xwr/2/