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;
}

就这样

如何修复下拉菜单

1 个答案: