드롭메뉴제작중에 문제 채택완료

.page-navi-wrap { position: absolute; left: 0; right: 0; bottom: 100%; }

.nav-wrap { display: flex; background-color: rgba(,,,0.5); }

.nav { display: flex; }

.pos { display: flex; margin-left: auto; align-self: auto; }

.nav-depth { position: relative; border-right: 1px solid rgba(,,,0.7); }

.nav-depth > span { display: block; font-size: 1rem; font-weight: 600; padding: 0 26px; height: 58px; line-height: 58px; cursor: pointer; min-width: 180px; }

.nav-depth.is-none > span { cursor: default; }

.nav-depth.is-arrow > span:after { position: absolute; content: ''; width: 14px; height: 14px; background: url(/img/ico/submenu_arrow.png) no-repeat center; right: 15px; top: calc( 50% ); transform: translate(0, -50%); }

.nav-depth.bg_black > span { color: #fff; }

.nav-depth.bg_white > span { color: #000; }

.nav-depth > ul { display: none; position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; z-index: 10; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }

.nav-depth > ul > li { position: relative; }

.nav-depth > ul > li > a { display: block; padding: 0 26px; height: 52px; line-height: 52px; border-bottom: 1px solid #ddd; }

.nav-depth > ul > li > a:after { position: absolute; content: ''; width: 14px; height: 14px; background: url(/img/ico/submenu_arrow.png) no-repeat center; right: 15px; top: calc( 50% ); transform: translate(0, -50%); }

@media(max-width: 768px) {

.nav { padding-left: 5px; }

.nav-depth > span { display: block; font-size: 14px; font-weight: 400; padding: 0 16px; height: 48px; line-height: 48px; cursor: pointer; min-width: 100px; }

.nav-depth > span:after { display: none; }

.nav-depth > ul > li > a { display: block; font-size: 12px; padding: 0 16px; height: 38px; line-height: 38px; border-bottom: 1px solid #ddd; }

.nav-depth > ul > li > a:after { display: none; }

}





    

        

            

            

            

            

            

        

    





$(function() {

    $(document).on('click','.nav-now',function() {

        var $that = $(this).closest('.nav-depth'),

            depth1= $that.data('depth');

        $.each($('.nav-depth'),function() {

            var $this = $(this),

                depth2 = $this.data('depth'),

                $target = $this.find('ul');

            if(depth1 == depth2) {

                $target.slideToggle('slow');

            } else {

                if($target.is(':visible') === true) {

                    $target.slideToggle('slow');

                }

            }

        });

    });

});