如何修复此悬停菜单？它不起作用

Question

我想使用 HTML 和 CSS 创建一个悬停菜单。我尝试将下拉菜单内容放在导航菜单等之外，但这些解决方案的 None 有效。我查看了几个网站上的代码，仅针对可悬停菜单显示了完全相同的解决方案。因此我猜这个错误包含在代码的其余部分中。抱歉我的英语不好，我希望你能理解一切。

<!doctype html>
<html>
    <head>
        <style>
            body{
                background-color: #2B2E2B;
            }
            .menu {
                position: fixed;
                top: 0;
                left: 0;
                z-index: 9999;
                width: 100%;
                height: 6%;
                background: linear-gradient(to right, #aaf6e4 0%, #ff99cc 100%);
            }
            .blog{
                opacity: 0.7;
                margin-top: 10%;
                width: 9%;
                height: auto;
                margin-left: 4%;
                float: left;
            }
            .dropdown{
                float: right;
                margin-right: 7%;
                margin-top: 2%;
                position: relative;
                display: inline-block;
            }
            .menuname{
                opacity: 0.7;
                font-size: 100%;
                color: #2B2E2B;
                text-align: center;
                padding: 0%;
                background-color: transparent;
                border-style: none;
                float: right;
                margin-top: 2%;
                font-family: OCR A Std, monospace;
                outline: none;
            }
            .menusymbol{
                opacity: 0.6;
                margin-top: 0%;
                width: 9%;
                height: auto;
                float: right;
                margin-left: 0;
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg;
                -moz-transform: rotate(90deg);
            }
            .dropdown-content{
                position: absolute;
                z-index: 1;
                display: none;
            }
            .line{
                
            }
            .line:hover{
                
            }
            .dropdown:hover .dropdown-content{
                display: block;
            }
            .dropdown:hover .menusymbol{
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg;
                -moz-transform: rotate(0deg);
            }
        </style>
    </head>
    <body>
        <div class="homepage" id="homepage">
            <nav class="menu" id="menu">
                <img class="blog" src="/img/blog.png">
                <img class="blog" src="/img/zeitleiste.png">
                <img class="blog" src"/img/user.png">
                <div class="dropdown">
                    <img  class="menusymbol" src="/img/three.png">
                    <button class="menuname" id="menuname">Test</button>
                    <div class="dropdown-content" id="dropdown-content">
                        <a class="line">Blog</a><br>
                        <a class="line">Timeline</a><br>
                        <a class="line">About me</a><br>
                        <a class="line">Contact</a>
                    </div>
                </div>
            </nav>
        </div>
    </body>
</html>

Answer 1

我没看出错误。它对我来说似乎工作正常（当我向弹出窗口添加背景时）。

body {
  background-color: lightgoldenrodyellow;
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 6%;
  background: linear-gradient(to right, #aaf6e4 0%, #ff99cc 100%);
}

.blog {
  opacity: 0.7;
  margin-top: 10%;
  width: 9%;
  height: auto;
  margin-left: 4%;
  float: left;
}

.dropdown {
  float: right;
  margin-right: 7%;
  margin-top: 2%;
  position: relative;
  display: inline-block;
}

.menuname {
  opacity: 0.7;
  font-size: 100%;
  color: #2B2E2B;
  text-align: center;
  padding: 0%;
  background-color: transparent;
  border-style: none;
  float: right;
  margin-top: 2%;
  font-family: OCR A Std, monospace;
  outline: none;
}

.menusymbol {
  opacity: 0.6;
  margin-top: 0%;
  width: 9%;
  height: auto;
  float: right;
  margin-left: 0;
  transform: rotate(90deg);
}

.dropdown-content {
  position: absolute;
  z-index: 1;
  display: none;
  background: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .menusymbol {
  transform: rotate(0deg);
}

<div class="homepage" id="homepage">
  <nav class="menu" id="menu">
    <img class="blog" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg">
    <img class="blog" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg">
    <img class="blog" src="https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg">
    <div class="dropdown">
      <img class="menusymbol" src="/img/three.png">
      <button class="menuname" id="menuname">Test</button>
      <div class="dropdown-content" id="dropdown-content">
        <a class="line">Blog</a><br>
        <a class="line">Timeline</a><br>
        <a class="line">About me</a><br>
        <a class="line">Contact</a>
      </div>
    </div>
  </nav>
</div>

如何修复此悬停菜单？它不起作用

How do I fix this hoverable menu? It doesnt Work

html

css

menu

hover