Submenu is hidden and z-index has no effect

Question

Viewing this fiddle will help out a lot with seeing my problem: http://jsfiddle.net/rgbjoy/JnL33/

I have a basic menu structure where in this example, Menu 2 is the current page. My submenus are absolute positioned. z-index has not effect to the sub-menu so I can't get the hovered div to be on top.

<ul class="menu">
    <li>
        <a href="#">Menu 1</a>
        <ul class="sub-menu s1">
            <li><a href="#">Submenu 1-1</a></li>
            <li><a href="#">Submenu 1-2</a></li>
            <li><a href="#">Submenu 1-3</a></li>
        </ul>
    </li>
    <li class="current-menu-item">
        <a href="#">Menu 2</a>
        <ul class="sub-menu s2">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul class="sub-menu s3">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
        </ul>
    </li>
</ul>

---

JQuery

$('.menu > li').hover(function() {
        if (!$(this).hasClass('current-menu-item')) {
            $(this).children('.sub-menu').stop().fadeIn('400');
        }
    }, function() {
        if (!$(this).hasClass('current-menu-item')) {
            $(this).children('.sub-menu').stop().fadeOut('400');
        }
    });

---

CSS

.sub-menu {
    position: absolute;
    display: none;
    top: 75px;
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f38120;
    text-align: center;
    font-size: 0;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}
.menu li:hover .sub-menu {
    z-index: 10;
}

Answer 1

I think this is what you need : http://jsfiddle.net/JnL33/7/

A slight modification was required in your jQuery code.

js:

$(document).ready(function(){
    $('.menu > li').hover(function() {
    $('.sub-menu').removeAttr('style').hide();
    $(this).find('.sub-menu').fadeIn(400).css("z-index", "999");
}, function() {
    $(this).find('.sub-menu').fadeOut(400, function(){
        $(".current-menu-item").find('.sub-menu').fadeIn(400);
    });
});
});