드롭다운메뉴 css 어떤부분때문에 펼쳐져 있는걸까요? 채택완료
드롭다운메뉴때문에 요즘 고생중입니다ㅠㅠ
pc사이트에서는 제대로 나오는데 모바일에서 밑에 이미지 보면 메뉴아이콘을 누르면
메뉴들이 나오는데 메인메뉴만 보이고
메인메뉴 클릭 > 서브메뉴가 펼쳐져야 하는데
메인이랑 서브 상관없이 다 펼쳐져서 나오네요ㅠㅠ
css소스중에 뭐때문에 몽땅 펼쳐져서 나오는걸까요 ㅠㅠ
.navbar-default .navbar-nav li{ background-color: #fff;
}
.navbar-default .navbar-nav>li> a{ color:#333; font-size: 18px; background: #f0f0f0; background:#eee; }
.navbar-default .navbar-nav .dropdown-menu>li{ color: #CCC; font-size: 16px;
}
.navbar-default .navbar-nav>li> a:hover .dropdown-menu { display:block; width: 100%; position: absolute; top: 30px; }
.navbar-default .navbar-nav .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .dropdown-menu>li>a:hover { font-weight:500; background-color:#fff;
}
.navbar-default .navbar-nav .dropdown-menu>.active>a, .navbar-default .navbar-nav .dropdown-menu>.active>a:focus, .navbar-default .navbar-nav .dropdown-menu>.active>a:hover { color:#555; background-color:#e7e7e7 } .navbar-default .navbar-nav .dropdown-menu>.disabled>a, .navbar-default .navbar-nav .dropdown-menu>.disabled>a:focus, .navbar-default .navbar-nav .dropdown-menu>.disabled>a:hover { color:#ccc; background-color:transparent
}
답변 2개
</p><p>.dropdown-menu {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position:absolute;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>top:100%;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>left:0;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>z-index:1000;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>display:none;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>float:left;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>min-width:200px;<span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding:5px 0 5px 0 ;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>font-size:14px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>text-align:center;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>list-style:none;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background-color:#000;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background: rgba(0, 0, 0, 0.5);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-background-clip:padding-box;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background-clip:padding-box;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>border-radius:4px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>-webkit-box-shadow:0 6px 12px rgba(0, 0, 0, .175);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>box-shadow:0 6px 12px rgba(0, 0, 0, .175)</p><p> </p><p>}</p><p>
이부분에서 보시는거와 같이 display:none 이 존재하는지의 여부에 따라 서브메뉴를 보여지게 하는 부분이라고 보실 수 있으실텐데요
이부분의 css는 미디어쿼리 992 이상에만 적용되어진걸로 보여집니다
모바일에서는 none 처리되어있다가 클릭 또는 오버시에 보여져야 한다는 css 코드가 전혀 보이지 않는 것으로 보입니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
미디어쿼리 @media (max-width:991px) 안에
.dropdown-menu {
display:block;
position:absolute;
}
요거추가하니까 바로되네요// 감사합니다 > <ㅎ