테스트 사이트 - 개발 중인 베타 버전입니다

모바일 overflow 드롭다운 채택완료

o3ohhh 4년 전 조회 3,263

모바일 네비입니다 https://m.naver.com/ 처럼 한줄로 쭉 늘어지고 좌우슬라이드 되는 네비를 만들고 싶은데 거기서 2depth 만 내려오고 싶은데

<div style="position:relative;z-index:999;">

    <div class="div" style="width:100%;overflow-x:auto;">

        <ul class="oneDepth" style="box-sizing:border-box;white-space:nowrap;">

            <!-- for문{ -->

            <li class="position:relative;display:inline-block;height:60px;cursor:pointer;line-height:60px;">

                1Depth입니다

                <ul class="twoDepth" style="display:none;position:absolute;top:60px;">

                    <li>

                        <a href="">2Depth입니다</a>

                    </li>

                </ul>

            </li>

            <!-- } for문 -->

        <ul>

    </div>

</div>

<script>

$(function(){

    $(".oneDepth").click(function(){

        $(this).children(".twoDepth").slideToggle(500);

    });

});

</script>

아래 사진으로 예시를 들면

body {:overflow-x:hidden} 해놓은 상태고 .div {overflow-x:auto} 때문에 코드상 .twoDepth {display:block} 가 되어도 (노란2depth'뭐하지1'처럼) 잘려서 보입니다 overflow를 지우면 2depth가 보이는데 좌우로 스크롤이 되어야 하는데 도와주세요 어떻게해야하나요?

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
4년 전

부모창에 overflow:hidden이 있으면 해당 크기가 넘어가는 자식이 있으면 다 잘려서 안보이게 됩니다

overflow 속성대신 ::after{clear:both;content:'';display:table}으로 해보세요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인