菜单栏显示效果

1.slideMenu.jsp

<div class="allmenu">
        <ul class="allwenu_ul">
            <li>
                <a href="javascript:void(0);" id="brand">BRAND COLLECTION</a>
                <input id="zh_brand" type="hidden" value="品牌系列" /> 
                <input id="en_brand" type="hidden" value="BRAND COLLECTION" />
                <ul id="brand_ul">
                    <li><a href="javascript:void(0); " id="li1">BRAND LI</a>
                        <input id="zh_li1" type="hidden" value="品牌 子列表"/>
                        <input id="en_li1" type="hidden" value="BRAND LI"/>
                    </li>
                    <li><a href="javascript:void(0); " id="li7">BRAND LI</a>
                        <input id="zh_li7" type="hidden" value="品牌 子列表"/>
                        <input id="en_li7" type="hidden" value="BRAND LI"/>
                    </li>
                </ul>
            </li>
            <li>
                <a href="slideMenu2.jsp" id="meiwu">MEIWUXILIECOLLECTION</a> 
                <input id="zh_meiwu" type="hidden" value="美物系列" /> 
                <input id="en_meiwu" type="hidden" value="MEIWUXILIE COLLECTION" />
                <ul id="meiwu_ul">
                    <li><a href="javascript:void(0); " id="li2">MEIWU LI</a>
                        <input id="zh_li2" type="hidden" value="美物 子列表"/>
                        <input id="en_li2" type="hidden" value="MEIWU LI"/>
                    </li>
                </ul>
            </li>
            <li>
                 <a href="javascript:void(0);" id="gaoji">GAODING COLLECTION</a> 
                 <input id="zh_gaoji" type="hidden" value="高定系列" /> 
                 <input id="en_gaoji" type="hidden" value="GAODING COLLECTION" />
                 <ul>
                    <li><a href="javascript:void(0); " id="li3">GAOJI LI</a>
                        <input id="zh_li3" type="hidden" value="高级 子列表"/>
                        <input id="en_li3" type="hidden" value="GAOJI LI"/>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

2.menu.css

ul li {
    list-style-type: none;
}

.allmenu_ul {
    width: 150px;
    overflow-x: hidden;
}

.allmenu ul li a {
    width: 150px;
    color: grey;
    font-size: 18px;
    outline: 0;
    text-decoration: none;
}

.allmenu ul li ul{
    display: none;
}

3.menu.js

$(document).ready(function() {
    /*$(".allmenu a").mouseover(function() {
        $(this).html('品牌系列');
    });
    $(".allmenu a").mouseleave(function() {
        $(this).html("BRAND COLLECTION");
    });*/


    $(".allmenu a").hover(
            function(){
                $(this).html($("#zh_"+this.id).val());
            },function() {
                $(this).html($("#en_"+this.id).val());
            })
    $("#brand").mousedown(function() {
        if($("#brand_ul").css('display')=='block'){
            $("#brand_ul").slideUp();
        }else{
        $("#brand_ul").slideDown();
        }
    })
    //meiwu有链接地址
    $("#meiwu").mousedown(function() {
        if($("#meiwu_ul").css('display')=='block'){
            $("#meiwu_ul").slideUp();
        }else{
            $("#meiwu_ul").slideDown();
        }
    })

    if(location.href.indexOf('slideMenu2.jsp')>0){
        $("#meiwu_ul").css({'display':'block'});
        $("#meiwu").attr("href","javascript:void(0);");
        $("#meiwu").css("color","#000000");
    }

})

---

可以根据页面url设置样式

$().ready(function() {
    var request = new Object();
    request = getRequest();
})

// newarrival
    if (request['tagIds'] == 2) {
        $newarrival.css({'color' : '#000000'});
        var $newArrivalUl = $("#newarrival_ul");
        if ($newArrivalUl.css('display') == 'block') {
                $newArrivalUl.css({
                                'display' : 'none'
                            });
                $newarrival.attr("href", moshop.base
                                    + "/product/list.jhtml?tagIds=2");
                        } else {
                            $newarrival.attr("href", "javascript:;");
                            $newArrivalUl.css({
                                'display' : 'block'
                            });
                        }
                    }


/**
 * 获取url参数方法
 */
function getRequest() {
    var url = location.search; // 获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}