js导航菜单

/**
样式
*/

.chanel_list
{
    float:left;
width:auto;
background-color:#F0F0EE;
border-top:solid 3px #288dab;
}
.chanel_list_item
{
    height: 33px;
    line-height: 33px;
    border:solid 1px #DEDEDE;
    border-top:none;
    text-align:left;
    font-size:14px;
    padding-left:30px;
    cursor:pointer;
    margin-top:2px;
    background:url(../images/common/pixel_round2.png) no-repeat 15px center;
    color:#666;
}
.chanel_list_item_hover
{
    font-weight:bold;
    color:#288dab;
    border-right: none;
    background:none;
    background: url("../images/common/arrow_left.png") no-repeat scroll left center #FFFFFF;
}
.chanel_list_item_bottom
{
    height: 87px;
    border:solid 1px #DEDEDE;
    border-top:none;
}
.chanel_list_right
{
width:740px;
background-color:#fff;
border:solid 1px #288dab;
border-left:none;
border-top:solid 2px #F0F0EE;
}
.chanel_list_right_title
{
float:left;
border-left:none;
height:33px;
line-height:33px;
padding-left:20px;
width:720px;
}
.chanel_list_right_content
{
float:left;
border-left:solid 1px #288dab;
padding:10px;
padding-top:0px;

}
.chanel_list_right_item
{
background:url(../images/common/arrow.gif) no-repeat 10px 16px;
float:left;
height:35px;
line-height:35px;
margin-top:5px;
margin-left:5px;
font-size:13px;
padding-left:25px;
width:690px;
background-color:#efefef;
overflow:hidden;
}
.chanel_list_right_item_hover
{
    background-color:#FF9;

}



<script type="text/javascript">
<!--
var y = 0;
var x = 0;

var classid = "";
var timeoutId = 0;
jQuery(function() {
    jQuery(".chanel_list_item").bind("mouseenter", function() {
        afterMouseLeaveRes();

        var temp = jQuery(this).attr("id");


        y = jQuery(this).offset().top-2;
        x = jQuery(this).offset().left+jQuery(this).width()+23;
        jQuery(".chanel_list_right").css("top", y);
        jQuery(".chanel_list_right").css("left", 210);

        classid = jQuery(this).attr("id");
        jQuery(".chanel_list_right_children").hide();
        jQuery("#class_" + classid).show();

        jQuery(this).addClass("chanel_list_item_hover");
        jQuery(".chanel_list_right").show();
    });

    jQuery(".chanel_list_item").bind("mouseleave", function(e) {
        mouseX = e.pageX;
        divX = jQuery(this).offset().left + jQuery(this).width() + 23;
        if (mouseX > divX) {
            afterMouseLeaveRes();
        }
    });

    jQuery(".chanel_list_right").bind("mouseleave", function() {
        afterMouseLeaveRes();
    });
    jQuery(".chanel_list_right_item")
            .bind(
                    "mouseenter",
                    function() {
                        jQuery(
                                ".chanel_list_right_item .chanel_list_right_item_hover")
                                .removeClass("chanel_list_right_item_hover");
                        jQuery(this).addClass(
                                "chanel_list_right_item_hover");
                    });
    jQuery(".chanel_list_right_item").bind("mouseleave", function() {
        jQuery(this).removeClass("chanel_list_right_item_hover");
    });
});



function afterMouseLeaveRes() {
    jQuery(".chanel_list_item_hover").removeClass("chanel_list_item_hover");
    jQuery(".chanel_list_right_item_hover").removeClass(
            "chanel_list_right_item_hover");
    jQuery("#chanel_list_right").hide();
}

    function secondarySearch(subjectId,parentId,parentName)
    {
        document.location.href = "<%=realPath%>/search/searchresult?subjectId="
                + subjectId + "&parentId=" + parentId
                + "&parentIdLevel=1&parentName=" + parentName;
    }
//-->
</script>
<!--content1-->
<div class="content_top">

    <div class="content_top_left">
        <!-- 导航菜单 -->
        <div class="chanel_list">
            <s:iterator value="menuNavigationsList" status="arr">
                <div class="chanel_list_item"
                    id="<s:property value="viewClaRelEntity.cid"/>">
                    <a
                        href="javascript:secondarySearch('<s:property value="#request.libId"/>','<s:property value="viewClaRelEntity.cid"/>','<s:property value="viewClaRelEntity.name"/>')"><s:property
                            value="viewClaRelEntity.name" /></a>
                    <%-- <s:property value="viewClaRelEntity.name" /> --%>
                </div>
            </s:iterator>
        </div>

        <div id="chanel_list_right" class="chanel_list_right"
            style="left: 0px; overflow: hidden; position: absolute; top: 0px; display: none;">
            <s:iterator value="menuNavigationsList" status="arr">
                <div id="class_<s:property value="viewClaRelEntity.cid"/>"
                    class="chanel_list_right_children" style="display: none">
                    <div class="chanel_list_right_content">
                        <s:iterator value="lsNavigationsA" status="arr">
                            <div class="chanel_list_right_item"
                                style=" height: auto; line-height: 15px;">
                                <a style="font-weight: 900; color: #288DAB;"
                                    href="javascript:secondarySearch('<s:property value="#request.libId"/>','<s:property value="viewClaRelEntity.cid"/>','<s:property value="viewClaRelEntity.name"/>')">
                                    <s:property value="viewClaRelEntity.name" />
                                </a>:
                                <s:iterator value="lsNavigationBs" status="arr1">
                                <s:if test="%{viewClaRelEntity.name==null}">
                                <br/>
                                </s:if>
                                <s:else>
                                    <a style="font-weight: 900;"
                                        href="javascript:secondarySearch('<s:property value="#request.libId"/>','<s:property value="viewClaRelEntity.cid"/>','<s:property value="viewClaRelEntity.name"/>')">
                                        <s:property value="viewClaRelEntity.name" />、
                                    </a>
                                    </s:else>
                                </s:iterator>
<br/>
                            </div>
                            <div style="height: 2px;"></div>

                        </s:iterator>
                    </div>
                </div>

            </s:iterator>
        </div>
    </div>
</div>