드롭 다운 메뉴에서 모바일 문제보기

Question

반응 형 드롭 다운 탐색 메뉴를 만들었지 만 해결할 수있는 한 가지 문제가 있습니다. 데스크톱 및 태블릿 용보기 인 경우 메뉴가 제대로 작동합니다. 그러나보기가 모바일 장치에 대한 것이면 내 탐색 메뉴를 블록 요소로 표시하고 있습니다. "드롭 다운"요소에는 드롭 다운 목록이 있습니다. 누군가가 드롭 다운 요소 위로 마우스를 가져 가면 드롭 다운 목록이 표시되어 위의 드롭 다운 목록을 표시하는 대신 '사진'요소를 아래로 밀기를 원합니다.

감사

HTML 코드 :

  <nav class="nav-main"> 
      <div class="logo">Random Text</div> 
      <ul class="ul-main"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li class="dropdown-li"><a href="#" class="dropdown-a">Dropdown</a> 
        <ul class="ul-bottom"> 
         <li><a href="#">Random Item</a></li> 
         <li><a href="#">Random Item</a></li> 
         <li><a href="#">Random-Item</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Photos</a></li> 
      </ul> 
     </nav> 

CSS 코드 :

* { 
    box-sizing: border-box; 
    padding:0px; 
    margin:0px; 
} 

body { 
    font-family: sans-serif; 
    background:lightgrey; 
} 

.nav-main { 
    display: flex; 
    justify-content: space-around; 
    height:120px; 
    background:#222; 
    align-items: center; 
} 

.logo { 
    color:#fff; 
    font-size:30px; 
    letter-spacing: 3px; 
} 

.ul-main { 
    display: flex; 
} 

.ul-main > li { 
    margin-right:50px; 
    list-style: none; 
} 

.ul-main > li:last-of-type { 
    margin-right:0px; 
} 

.ul-main > li > a { 
    color:#fff; 
    display: inline-block; 
    padding:10px 20px; 
    background:#ff6c00; 
    text-decoration: none; 
    transition:all .3s ease-in-out; 
} 

.ul-main > li > a:hover { 
    opacity:.7; 
} 

.ul-main > li:hover > ul { 
    display: block; 
} 

.dropdown-a { 
    position: relative; 
} 

.ul-bottom { 
    position: absolute; 
    background:#ff6c00; 
    display: inline-block; 
    display: none; 
} 

.ul-bottom > li { 
    list-style: none; 
    display: block; 
    border-top:1px solid black; 
    transition:all .3s ease-in-out; 
} 

.ul-bottom > li:hover { 
    background:red; 
} 

.ul-bottom > li > a { 
    display: inline-block; 
    padding:10px 20px; 
    text-decoration: none; 
    color:#fff; 
} 

@media only screen and (max-width:768px) { 
    .nav-main { 
     flex-direction: column; 
    } 
} 

@media only screen and (max-width:420px) { 
    .nav-main { 
     flex-direction: column; 
     height:auto; 
    } 

    .ul-main { 
     flex-direction: column; 
     width:100%; 
    } 

    .ul-main > li { 
     display: block; 
     width:100%; 
     border-top:1px solid #000; 
    } 

    .ul-main > li > a { 
     display: block; 
    } 

    .ul-bottom { 
     box-shadow: 1px 1px 5px #000; 
    } 
} 

Answer 1

사람이 드롭 다운 요소와 드롭 다운 목록 위에 마우스를 할 때 내가 밀어, 표시됩니다 싶습니다

위의 드롭 다운 목록을 표시하는 대신 '사진'요소를 아래로 내립니다.

사람 드롭 다운 요소를 가져 가면 요소가 방금 일 relative 또는 initial

@media only screen and (max-width:420px) { 
    .ul-bottom { 
     position: relative; 
    } 
}