ドロップダウンメニューの問題携帯電話の表示時に表示

Question

レスポンシブなドロップダウンメニューを作成しましたが、修正に役立つ問題が1つあります。デスクトップとタブレット用のビューの場合、メニューは正常に動作しています。しかし、モバイルデバイス用のビューの場合、私はナビゲーション要素をブロック要素として表示しています。 "dropdown"要素にはドロップダウンリストがあります。誰かがドロップダウン要素の上にマウスを置いてドロップダウンリストが表示されている場合は、その上にドロップダウンリストを表示する代わりに、「写真」要素を押し下げてください。

おかげ

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から.ul-bottomのpositionまたはinitial

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