如何修复下拉菜单

问题描述 投票:1回答:1

我正在训练我的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标签的代码只是为了弄清楚这些东西的位置。我也在学习这些东西,所以在其他显示器上可能会非常糟糕。

html css drop-down-menu
1个回答
1
投票

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

nav li:hover ul{
    display: block;
}

就这样

© www.soinside.com 2019 - 2024. All rights reserved.