컨텐츠가 바뀌어도 슬라이드 메뉴 그대로 고정을 하려면..

<nav>        <ul>            <li class="btn"><a href="#">메뉴1</a></li>            <li class="list">                <dl>                    <dd><a href="#">- 메뉴1-2</a></dd>                    <dd><a href="#">- 메뉴1-3</a></dd>                </dl>            </li>            <li class="btn"><a href="#">메뉴2</a></li>            <li class="list">                <dl>                    <dd><a href="#">- 메뉴2-1</a></dd>                    <dd><a href="#">- 메뉴2-2</a></dd>                </dl>            </li>        </ul>    </nav>

nav{width:220px;}nav>ul { list-style:none;}nav>ul>.btn>a{width:220px; height:80px; line-height:80px; padding-left:25px; display:block; box-sizing:border-box; background:#4f463f; color:#fff; border-bottom:1px outset #ccc; font-weight:bold}nav>ul>.on>a{background:#ff722d; color:#fff;border:0}nav>ul>.list{display:none;}nav>ul>.list>dl{background:#fff;}nav>ul>.list>dl>dd{padding:7px 25px; line-height:1.2em}nav>ul>.list>dl>dd>a{color:#727272; font-size:0.82em;}nav>ul>.list>dl>dd>a:hover, nav>ul>.list>dl>dd>a:focus{color:#ff722d}

$(function() { $('nav>ul>.btn').click(function(){  $('nav>ul>.btn').next().slideUp('slow')  $(this).next().slideDown('slow') $('nav>ul>.btn').removeClass('on'); $(this).addClass('on'); });});