CSS/HTML - CSS付きハンバーガーメニュー

Question

私のHTML/CSSクラスでは、Webページを作ってそれを反応させるようにしました。条件の1つは、画面サイズがモバイル画面サイズのときにハンバーガースタイルのメニューを作成する必要があることです。

まあ、私はメニューのドロップダウンメニュー項目をクリックして（おそらくちょうどCSSでは不可能なので、アクティブまたは：ホバーが行う）メニューを作る方法以外はすべてを理解しました。 JavaScriptを使用することはできません。

IMGがホバリング/アクティブになっているときにリストの表示プロパティをブロックする方法を知りたいと思います。

関連するHTML部分：

<div class="nav"> 
    <img id="hamburger" src="img/hamburger.png" alt="menu"/> 
    <ul class="clearfix"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Info</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Sample</a></li> 
     <li><a href="#">Lorem</a></li> 
     <li><a href="#">Ipsum</a></li> 
     <li><a href="#">Last</a></li> 
    </ul><!-- Einde menu items --> 
    </div><!-- Einde nav --> 

携帯画面用CSS：

@media screen and (max-width: 500px) { 

.mobile-collapse { 
    width: auto; 
    float: none; 
} 
.hide-mobile { 
    display: none; 
} 
.nav { 
    padding-left: 0%; 
} 
.nav ul li { 
    display: none; 
} 
.nav img { 
    display: block; 
    height: 50px; 
} 
} 

ので、それをまとめるために、私は.nav imgがあるとき、私はdisplay:blockに.nav ul liを変更する方法を知りたいです

Answer 1

どのようにして.nav ul liを表示するかを知りたいのですが：bl .navのIMGが

に推移したときOCKあなたは兄弟セレクタ、〜でチルダを使用する必要があります。

あなたのコードは...

.nav img:hover ~ ul li { 
    display: block; 
} 

はそれを試してみてくださいする必要があります。 CSSのA good explanation of the tilde

Answer 2

チルダ（~）またはプラス（+）のcss演算子を使用できます。

チルダ演算子はプラス演算子はadjacent sibling selector

.nav img:hover + ul li { 
    display: block; 
}