仿58同城下拉菜单

全上海

全上海 黄浦 卢湾 徐汇 长宁 静安 普陀 闸北 全上海 黄浦 卢湾 徐汇 长宁 静安 普陀 闸北 全上海 黄浦 卢湾 徐汇 长宁 静安 普陀 闸北

 

 

 

 

 

 

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://files.cnblogs.com/dachie/zp.css" />

 

 

<div class="container">
        <div class="pophead">
            全上海
        </div>
        <div style="width: 396px; left: -295px;" class="popcontent cols">
            <div class="lev1_list">
                <a href="#">全上海</a><a href="#">黄浦</a><a href="#">卢湾</a><a href="#">徐汇</a><a href="#">长宁</a><a
                    href="#">静安</a><a href="#">普陀</a><a href="#">闸北</a> <a href="#">全上海</a><a href="#">黄浦</a><a
                        href="#">卢湾</a><a href="#">徐汇</a><a href="#">长宁</a><a href="#">静安</a><a href="#">普陀</a><a
                            href="#">闸北</a><a href="#">全上海</a><a href="#">黄浦</a><a href="#">卢湾</a><a href="#">徐汇</a><a
                                href="#">长宁</a><a href="#">静安</a><a href="#">普陀</a><a href="#">闸北</a>
            </div>
        </div>
        <i class="popdev"></i>
    </div>
    <script type="text/javascript">
        $(".container").each(function(i) {
            var obj = $(this);
            var objatt = {
                cm: obj.children(".pophead"),
                dev: obj.children(".popdev"),
                bm: obj.children(".popcontent"),
                c: obj
            };
            obj.hover(function(e) {
                $(".container").removeClass("hover");
                obj.removeClass("hover");
                obj.addClass("hover");
                objatt.dev.css({
                    width: objatt.cm.innerWidth()
                });
            },
                function(e) {
                    $(".container").removeClass("hover");
                    obj.removeClass("hover");
                });
        });
    </script>