<ul>下拉推送父<li>

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

View on Codepen with SCSS

Answer 1

您需要设置位置：相对于父项，然后在下拉列表中设置：absolute。

不触及HTML，那就是

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

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

第二个规则将来自.navbar-list的后代的任何<ul>设置为绝对定位，将其从流中移除，这样它们就不会“推”其他人，而第一个规则则为{{1这是.navbar列表的直接子项，其子项<li>将从中定位。

Answer 2

1. 将position: relative添加到.navbar-list li
2. 将position: absolute top: 100% left: 0和width: 100%添加到li ul

Updated codepen

Answer 3

试试这个

* {
  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;
  position: absolute;
  width: auto;
}

.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;
  position: relative;
}

.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>