<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style>

.hd-menu > li{position:relative}

.hd-menu-sub-wrap{position:absolute;display:none;z-index:9999;left:0;top:100%;width:100%;}

.hd-menu-sub{background:#c0bebe;list-style:none;padding:0;margin:0;border-top: 3px solid #999999;}

.hd-menu-sub > li{padding:0;line-height:25px;margin:0;border-bottom:1px solid #f3f3f3}

.hd-menu-sub > li:last-child {border-bottom:none}

.hd-menu-sub > li a{font-family:'Nanum Gothic';font-size:12px;margin:0;padding:0;display:block;text-align:center;padding: 6px 12px;line-height: 20px;transition: all 0.25s ease-in-out;}

.hd-menu-sub > li a:hover {color: #fff;font-weight: 600;text-decoration: none;    background: #999999 !important;}

.in-main-menu {}

.in-main-menu > ul {list-style:none;padding:0;margin-bottom:0;width:770px;height:100%;}

.in-main-menu > ul:after {display:block;visibility:hidden;clear:both;content:""}

.in-main-menu > ul > li {float: left;width:110px;height:100%;}

.in-main-menu > ul > li > a {display:block;text-align:center;padding:0 0px 40px;color:#821143;height:40px;overflow:hidden;font-family:'Nanum Gothic'; font-size:14px;white-space: nowrap;transition: all 0.25s ease-in-out;}

.in-main-menu > ul > li > a .menu-span {display: inline-block;padding: 7px 8px;line-height: 20px;}

.in-main-menu > ul > li > a:hover .menu-span {background: rgba(0,0,0,0.05);border-radius: 4px;transition: all 0.25s ease-in-out;}

</style>

<div class="in-main-menu">

<ul class="hd-menu">

    <li>

        <a href="#" target="_self" class=""><span class="menu-span">메뉴1</span></a>

        <div class="hd-menu-sub-wrap">

            <ul class="hd-menu-sub">

                <li><a href="#" target="_self">메뉴1-1</a></li>

                <li><a href="#" target="_self">메뉴1-2</a></li>

            </ul>

        </div>

    </li>

    <li>

        <a href="#" target="_self" class=""><span class="menu-span">메뉴2</span></a>

        <div class="hd-menu-sub-wrap">

            <ul class="hd-menu-sub">

                <li><a href="#" target="_self">메뉴2-1</a></li>

                <li><a href="#" target="_self">메뉴2-2</a></li>

            </ul>

        </div>

    </li>

    <li>

        <a href="#" target="_self" class=""><span class="menu-span">메뉴3</span></a>

        <div class="hd-menu-sub-wrap">

            <ul class="hd-menu-sub">

                <li><a href="#" target="_self">메뉴3-1</a></li>

                <li><a href="#" target="_self">메뉴3-2</a></li>

            </ul>

        </div>

    </li>

</ul>

</div>

<script type="text/javascript">

<!--

var check_width = $( window ).width();

$(function(){

    $( window ).resize(function() {

        check_width = $( window ).width();

    });

    $('.hd-menu li').hover(function(){

        if (check_width > 768) {

            $('.hd-menu-sub-wrap',this).slideDown(300, 'swing');

        }

    }, function(){

        $('.hd-menu-sub-wrap',this).slideUp(100, 'swing');

    });  

});

//-->

</script>