有人可以向我解释为什么我的导航栏的子菜单在同一行吗？

Question

谁能给我解释一下为什么我的导航栏的子菜单在同一行，为什么悬停在上面时关于栏会变得这么大？我希望他们在彼此之下。这是我的 code.

HTML

<nav class="navigation">
    <ul>
        <li><a href="#">Approach</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Class</a></li>
        <li><a href="#">About</a>
            <ul class="submenu">
                <li><a href="#">Submenu1</a></li>
                <li><a href="#">Submenu2</a></li>
                <li><a href="#">Submenu3</a></li>
            </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Get In Touch</a></li>
    </ul>
</nav>

CSS

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background-color: #f6f6f6;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul li {
  display: inline-block;
  vertical-align: top;
  position: relative;
}

ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 25px 20px;
  text-decoration: none;
  white-space: nowrap;
}

nav li ul {
  display: none;
}

nav li:hover ul {
  display: block;
}

Answer 1

您需要从 ul 中删除 overflow:hidden，然后绝对定位子菜单。

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f6f6f6;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 25px 20px;
  text-decoration: none;
  white-space: nowrap;
}
nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
nav li:hover ul {
  display: block;
}

<nav class="navigation">
  <ul>
    <li><a href="#">Approach</a>
    </li>
    <li><a href="#">Portfolio</a>
    </li>
    <li><a href="#">Class</a>
    </li>
    <li><a href="#">About</a>
      <ul class="submenu">
        <li><a href="#">Submenu1</a>
        </li>
        <li><a href="#">Submenu2</a>
        </li>
        <li><a href="#">Submenu3</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Blog</a>
    </li>
    <li><a href="#">Get In Touch</a>
    </li>
  </ul>
</nav>

Answer 2

您正在提供 ul overflow: hidden，这就是它没有出现的原因。然后，您需要绝对定位 .submenu 元素。

CSS

.navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background-color: #f6f6f6;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul > li {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

ul > li:hover .submenu {
  display: block;
}

ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 25px 20px;
  text-decoration: none;
  white-space: nowrap;
}

nav li:hover ul {
  display: block;
}

.submenu {
  position: absolute;
  width: 200px;
  border: 1px solid;
  display: none;
}

悬停时的结果：

DEMO

有人可以向我解释为什么我的导航栏的子菜单在同一行吗？

Can someone explain to me why the submenus of my navigation bar are on the same line?

css

navigation