드롭다운메뉴 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
.dropdown-menu {
position:absolute;
top:100%;
left:0;
z-index:1000;
display:none;
float:left;
min-width:200px;
padding:5px 0 5px 0 ;
font-size:14px;
text-align:center;
list-style:none;
background-color:#000;
background: rgba(0, 0, 0, 0.5);
-webkit-background-clip:padding-box;
background-clip:padding-box;
border-radius:4px;
-webkit-box-shadow:0 6px 12px rgba(0, 0, 0, .175);
box-shadow:0 6px 12px rgba(0, 0, 0, .175)
}
이부분에서 보시는거와 같이 display:none 이 존재하는지의 여부에 따라 서브메뉴를 보여지게 하는 부분이라고 보실 수 있으실텐데요
이부분의 css는 미디어쿼리 992 이상에만 적용되어진걸로 보여집니다
모바일에서는 none 처리되어있다가 클릭 또는 오버시에 보여져야 한다는 css 코드가 전혀 보이지 않는 것으로 보입니다.
감사합니다//
미디어쿼리 @media (max-width:991px) 안에
.dropdown-menu {
display:block;
position:absolute;
}
요거추가하니까 바로되네요// 감사합니다 > <ㅎ
