仿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="https://files.cnblogs.com/dachie/zp.css" />

<div class="container">
        <div class="pophead">
            全上海
        </div>
        <div style=" 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({
                    objatt.cm.innerWidth()
                });
            },
                function(e) {
                    $(".container").removeClass("hover");
                    obj.removeClass("hover");
                });
        });
    </script>