모바일 overflow 드롭다운
본문
모바일 네비입니다
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
부모창에 overflow:hidden이 있으면 해당 크기가 넘어가는 자식이 있으면 다 잘려서 안보이게 됩니다
overflow 속성대신 ::after{clear:both;content:'';display:table}으로 해보세요
답변을 작성하시기 전에 로그인 해주세요.
