html - CSS/HTML - 使用 CSS 的汉堡包菜单

Question

对于我的 HTML/CSS 类(class)，我被分配制作一个网页，并使其响应。其中一个条件是当屏幕尺寸为移动屏幕尺寸时，我们必须制作汉堡式菜单。

好吧，除了如何让菜单下拉成为单击时的菜单项之外，我想出了所有的事情(可能仅使用 css 是不可能的，所以 :active 或 :hover 就可以了)。我们不允许使用任何 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

I'd like to know how I can change .nav ul li to display:block when .nav img is hovered

您应该使用兄弟选择器，波浪号是~。

你的代码应该是...

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

试试吧。 A good explanation of the tilde在 CSS 中。