CSS/HTML - 带CSS的汉堡菜单

Question

对于我的HTML/CSS类，我分配了一个网页并使其响应。其中一个条件是，当屏幕尺寸处于移动屏幕尺寸时，我们必须制作汉堡式菜单。嗯，我想出了除了如何让菜单下拉菜单项点击（可能不可能与只是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 ul li到display:block时.nav img是徘徊..

Answer 1

我想知道我可以如何更改.nav ul li显示：bl玉珠当 .nav IMG悬停

您应该使用兄弟选择，波浪线是〜。

你的代码应该是...

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

尝试。在CSS中使用A good explanation of the tilde。

Answer 2

您可以使用代字符（~）或加号（+）的css运算符。

的波浪运算符称为general sibling selector

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

加号运算符称为adjacent sibling selector

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