html - 我的子菜单只会在我刷新页面时出现？

Question

我正在为学校做一个元素，老师告诉我，如果我将鼠标悬停在某个图像上，则需要出现一个子菜单。我有一些代码并且它可以工作，但前提是我刷新浏览器。我不知道为什么。

我也认为我应该在我的 HTML 中创建一个元素并将其中的内容放入我的 css 但我试过了但它也不起作用。下面是我的 HTML 代码:

<header>
    <div class="wrapper">
        <h1 class="structural">De Fonduepot</h1>
        <section class="clearfix">
            <h2 class="structural">Kop</h2>
            <img src="images/kop.png" alt="afbeelding waar twee fonduepotten
                                      opstaan en de naam van het resaurant" />
            <img src="images/menu.jpg" alt="menu icoon voor mobiel surfen" />
            <ul id="mobilemenu">
                <li><a href="home.html">Home</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="reserveren.html">Reserveren</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </section>
        <nav>
            <h2 class="structural">Menu</h2>
            <ul id="mainmenu">
                              <li><a href="home.html" id="selected">Home</a></li>
                              <li><a href="menu.html">Menu</a></li>
                              <li><a href="reserveren.html">Reserveren</a></li>
                              <li><a href="contact.html">Contact</a>
            </ul>
        </nav>
    </div>
</header>

这是我的 CSS:

#mobilemenu {
  list-style-type: none;
  position: absolute;
  z-index: 1;
  right: 1%;
  top: 76%;
  width: 40%;
  border-radius: 5rem;
  display: none;
}

#mobilemenu li a {
  line-height: 3rem;
  text-decoration: none;
  text-align: center;
  display: block;
  border: 0.1rem solid #381402;
  color: #ac0909;
  background-color: #dabd8b;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

#mobilemenu li a:hover {
  color: #dabd8b;
  background-color: #ac0909;
}

header section {
  background-image: url("../images/zand.jpg");
  background-size: contain;
  border-radius: 5px;
  border: 0.25rem solid #f3deba;
  width: 90%;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 1rem;
  position: relative;
}

header img:first-of-type {
  border-radius: 0.5rem;
  width: 80%;
  margin: 2%;
}

header img:last-of-type {
  float: right;
  margin-top: 1%;
  margin-right: 1%;
  width: 13%;
  border-radius: 5px;
  border: 0.25rem solid #f3deba;
}

header img:last-of-type:hover + #mobilemenu {
  display: block;
}

#mobilemenu:hover {
  display: block;
}

Answer 1

如果您在 IE 中进行测试，请务必正确关闭所有标签:

<li><a href="contact.html">Contact</a>

必须是

<li><a href="contact.html">Contact</a></li>