出现闪烁，菜单点开不显示

<!DOCTYPE html>



层级菜单
<style type="text/css">

    ul,body {
        margin: 0;
        padding: 0;
    }
    .menu {
        margin: 0 auto;
        /*height: 550px;*/
        width: 200px;
        background-color: cyan;
    }
    ul {
        list-style: none;
    }
    .menu li {
        width: 200px;

    }

    .menu li a{
        text-decoration: none;
        text-align: center;
    }
    .menu li a.fore {
        display: block;
        width: 200px;
        height: 20px;
        font: 700 16px/20px 'Microsoft Yahei';
        background-color: #F79500;  
    }


    .menu li ul li a{

        display: block;
        font: 400 14px/20px 'Microsoft Yahei';
        margin:0 auto;
    }
    .menu li ul {
        display: none;
    }

    .menu li ul.current {
        display: block;
    }
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function(){

        $('.fore').click(function() {

            $(this).next().slideDown('current').parent().siblings().children('ul').slideUp();

        });


    });
</script>




    <li>
        <a href="" class="fore">水果2</a>
        <ul>
            <li><a href="#">苹果</a></li>
            <li><a href="#">香蕉</a></li>
            <li><a href="#">火龙果</a></li>
            <li><a href="#">梨子</a></li>
        </ul>
    </li>

    <li>
        <a href="" class="fore">水果3</a>
        <ul>
            <li><a href="#">苹果</a></li>
            <li><a href="#">香蕉</a></li>
            <li><a href="#">火龙果</a></li>
            <li><a href="#">梨子</a></li>
        </ul>
    </li>

    <li>
        <a href="" class="fore">水果4</a>
        <ul>
            <li><a href="#">苹果</a></li>
            <li><a href="#">香蕉</a></li>
            <li><a href="#">火龙果</a></li>
            <li><a href="#">梨子</a></li>
        </ul>
    </li>

    <li>
        <a href="" class="fore">水果5</a>
        <ul>
            <li><a href="#">苹果</a></li>
            <li><a href="#">香蕉</a></li>
            <li><a href="#">火龙果</a></li>
            <li><a href="#">梨子</a></li>
        </ul>
    </li>
</ul>


水果2
a标签不写，点击会自动刷新页面，所以下面的方法不起作用
$(this).next().slideUp(1000); 这个应该就可以了吧，不用那么多吧

第一：a标签的冒泡事件，取消冒泡事件；第二：$(this).next().sliderUp();$(this).parent("li").siblings("li").children("ul").sliderDown();