html - <ul> 下拉向上推父级 <li>

Question

我想在我的页眉中添加一个 CSS 下拉菜单。它的部分工作... 但是当你将鼠标悬停在它上面时，这个元素会逃脱。如何正确设置？ 它应该留在原地，下拉菜单应该在 <li> 下元素。

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Advent Pro', sans-serif;
}

body {
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.navbar-list,
.navbar-list a,
.navbar,
.logo {
  display: flex;
  align-items: center;
}

.navbar {
  display: flex;
  background: #008cf4;
  padding: 0 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid #d6d7dd;
  font-size: 14px;
}

.navbar .navbar-list {
  height: 80px;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  margin-left: auto;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: flex-end;
}

.navbar .navbar-list a {
  color: #e9e9e9;
  text-decoration: none;
  margin: 0 10px;
  padding: 0 10px;
  text-transform: uppercase;
}

.navbar .navbar-list a:hover {
  color: #fff;
}

.navbar .navbar-list i {
  font-size: 14px;
  color: inherit;
  padding-bottom: 1px;
}

.navbar .navbar-list ul {
  display: none;
  flex-direction: column;
  list-style-type: none;
}

.navbar .navbar-list ul li {
  list-style-type: none;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-start;
  height: auto !important;
  opacity: 0.8;
  background: black;
  text-align: center;
}

.navbar .navbar-list ul li a {
  height: 10px !important;
}

.navbar .navbar-list ul li a:hover {
  background-color: #a4a4a4;
  height: 10px;
}

.navbar .navbar-list li:hover ul {
  display: block;
  height: auto !important;
}

.navbar .logo {
  margin-right: 15px;
}

.navbar .logo h1 {
  font-family: 'Alegreya', sans-serif;
  font-size: 35px;
}

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Alegreya&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Advent+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>

<div class="wrapper">
  <nav class="navbar">
    <div class="logo">
      <h1>Your logo</h1>
    </div>
    <ul class="navbar-list">
      <li>
        <a href="#">
          <i class="material-icons">home</i> Dashboard
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">build</i> Account & settings
        </a>
        <ul>
          <li>
            <a href="#"> 1</a>
          </li>
          <li>
            <a href="#"> 2</a>
          </li>
          <li>
            <a href="#"> 3</a>
          </li>
        </ul>
      </li>
    </ul>
    <div>avatar</div>
  </nav>
</div>

View on Codepen with SCSS

Answer 1

您需要设置 position:relative 到父项，然后在下拉列表中设置 position:absolute。

如果不触及 HTML，那就是

.navbar-list > li{
  position:relative;
}

.navbar-list ul{
  position:absolute;
  width:100%;
}

第二条规则设置任何<ul>这是绝对定位的 .navbar-list 的后代，将其从流程中删除，这样他们就不会“推”其他人，而第一个使任何 <li>那是 .navbar-list 的直接子节点，它们的子节点 <ul>将被定位。