Javascript Jquery的菜单和子菜单问题

我正在尝试制作一个带有淡出滚动效果的菜单

正如你所看到的，当我点击之前打开子菜单的同一个按钮时，它就起作用了

HTML

<div class="menu">
<ul>
    <li class="submenu">
        <a href="#">One link</a>
        <ul class="sub-menu">
            <li><a href="#">Some actions</a></li>
            <li><a href="#">Some actions</a></li>
            <li><a href="#">Some actions</a></li>
        </ul>
    </li>
    <li class="submenu">
        <a href="#">Another link</a>
        <ul class="sub-menu">
            <li><a href="#">Another actions</a></li>
            <li><a href="#">Another actions</a></li>
            <li><a href="#">Another actions</a></li>
            <li><a href="#">Another actions</a></li>
            <li><a href="#">Another actions</a></li>
        </ul>
    </li>
</ul>        
</div>

JQuery

var handler, target;

$(".menu .submenu > a").click(function(e) {
    e.preventDefault();
    handler = $(this);
    target = handler.siblings(".sub-menu");
    if (!target.hasClass("showing")){
    target.addClass("showing");
        handler.css("background-color", "red");
    handler.css("color","#fff");
    target.css( "display", "block" );
    target.animate({
        opacity: 1,
    left: "+=200",
    }, "fast");
} else {
    target.removeClass("showing");
    target.animate({
        left: "-=200",
        opacity: 0
    }, "fast", function() {
        target.css( "display", "none" );
        handler.css("background-color", "");
        handler.css("color","");
    });
}
});

$(".menu .submenu > a").blur(function() {
     handler = $(this);
 target = handler.siblings(".sub-menu");
 if (target.hasClass("showing")){
     target.removeClass("showing");
     target.animate({
         left: "-=200",
     opacity: 0
         }, "fast", function() {
         target.css( "display", "none" );
     handler.css("background-color", "");
     handler.css("color","");
     });
  }
});

但是，如果使用另一个子菜单按钮替换，则会失败：(

非常感谢你的帮助，谢谢

已更新

---

我注意到它在Firefox、Chrome和IE中有不同的行为。我想在按下一个新按钮时隐藏上一个按钮：//

我看不到小提琴中发生任何事情。你想做什么？很抱歉，更新后的小提琴是：我看不到它失败。添加

位置：相对；

到

。子菜单

这样子菜单就可以了不要重叠。

var handler, target;

$(".menu .submenu > a").click(function(e) {
    e.preventDefault();
    handler = $(this);
    target = handler.siblings(".sub-menu");
    if (!target.hasClass("showing")){
    target.addClass("showing");
        handler.css("background-color", "red");
    handler.css("color","#fff");
    target.css( "display", "block" );
    target.animate({
        opacity: 1,
    left: "+=200",
    }, "fast");
} else {
    target.removeClass("showing");
    target.animate({
        left: "-=200",
        opacity: 0
    }, "fast", function() {
        target.css( "display", "none" );
        handler.css("background-color", "");
        handler.css("color","");
    });
}
});

$(".menu .submenu > a").blur(function() {
     handler = $(this);
 target = handler.siblings(".sub-menu");
 if (target.hasClass("showing")){
     target.removeClass("showing");
     target.animate({
         left: "-=200",
     opacity: 0
         }, "fast", function() {
         target.css( "display", "none" );
     handler.css("background-color", "");
     handler.css("color","");
     });
  }
});