html - 如何修复下拉菜单

Question

我正在训练我的 CSS 以传递给 JS，但我很担心，因为我在制作下拉菜单时遇到了一些问题。

我已经有了这个概念，但是当我把它付诸实践时，它有点窃听，并且移动了 nav。

header {
  overflow: auto;
}

header img {
  float: left;
  margin-left: 300px;
  margin-top: 10px;
}

header img:hover {
  opacity: 0.8;
}

nav {
  float: right;
  margin-right: 250px;
  margin-top: 40px;
}

nav ul {
  padding: 0px;
}

nav ul li {
  display: inline;
  margin-right: 50px;
  border-right: 1px solid black;
}

nav ul li:last-child {
  border-right: none;
}

nav ul li a {
  color: black;
  text-decoration: none;
  font-weight: bold;
  font-family: roboto;
  margin-right: 50px
}

nav ul li a:hover {}

nav li ul {
  display: none;
}

nav li:hover ul {
  display: block;
  position: relative;
}

nav li:hover li {
  float: none;
}

<header>

  <img src="logo.png">

  <nav>

    <ul>
      <li>

        <a href="#">Menu 01</a>

        <ul>
          <li><a href="#">Submenu 01</a></li>
        </ul>

      </li>
      <li><a href="#">Menu 02</a></li>
      <li><a href="#">Menu 03</a></li>
      <li><a href="#">Menu 04</a></li>
    </ul>

  </nav>

</header>

我发送带有 img 标签的代码只是为了明确这些东西的位置。我也在学习这些东西，所以它在其他显示器上可能会非常糟糕。

Answer 1

nav li ul{
   display: none;
   position:absolute;
}

nav li:hover ul{
    display: block;
}

就这些