如何在尊重原始布局的下拉菜单中设置固定位置？

Question

我正在创建一个 header ，它将由不同的重定向 link 组成，有些情况是由几个 link 组成的一些下拉元素单击主要 link 时显示。这是我的 html


<div id="row">
        <div class="col-xs-12">
            <header>
                <nav class="navbar navbar-expand-lg navbar-light header">
                 
                  
                  <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav menu">
                      
                      <li class="nav-item">
                        <a class="nav-link">PERSONAL INFO</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link menu-link-toggle" v-on:click="displayAnimalList = !displayAnimalList">PERSONAL FORM</a>
                        <ul class='dropdown-menu' v-show="!displayAnimalList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>DATA</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>FORM DATA</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >AUTOCOMPLETE</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class='menu-link menu-link-toggle' v-on:click="displayServiceList = !displayServiceList">SERVICES</a>
                        <ul class='dropdown-menu' v-show="!displayServiceList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >LA CRÉMATION PRIVÉE</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' href="https://www.esthima.fr/incineration-reference">PERSONAL S</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>COMPANY S</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >FULL S INFO</a>
                          </li>
                        </ul>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link ">SHOP</a>
                      </li>
                      <li class="nav-item active">
                        <router-link class="nav-link" to="/devis">TARIFS ET DEVIS </router-link>
                      </li>
                      <li class="nav-item">
                        <a class='menu-link menu-link-toggle' v-on:click="displayContactList = !displayContactList">CONTACT</a>
                        <ul class='dropdown-menu' v-show="!displayContactList">
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link'>MAIL</a>
                          </li>
                          <li class='dropdown-menu-item'>
                            <a class='dropdown-menu-link' >PHONE</a>
                          </li>
                        </ul>
                      </li> 
                    </ul>
                  </div>
              </nav>
            </header>
        </div>
    </div>

这里是 mi css

.header {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.menu {
  list-style: none;
  display: flex;
}

.nav-item {
  padding: 25px;
}

.menu-link-toggle {
  cursor: pointer;
}

.dropdown-menu {
  list-style: none;
}

a {
  font-size: 14px;
  color: #D53865;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
}

.added {
  display: none;
}

我已将其按应有的方式进行布局，但是当我单击 drop-down 菜单时出现问题，该菜单会推动 header 的其余元素并将其取消布局。我试图为构成 header 的元素引入绝对位置，但它不尊重原始布局，如下所示 link https://codepen.io/carlosurra/pen/YzqXjdP

提前问候并感谢您的时间和帮助

Answer 1

您应该可以通过将 position: relative; 添加到 class .nav-items 并将 position: absolute; 添加到 class .dropdown-menu

这是更新后的 css

.header {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.menu {
  list-style: none;
  display: flex;
}

.nav-item {
  padding: 25px;
  position: relative;
}

.menu-link-toggle {
  cursor: pointer;
}

.dropdown-menu {
  list-style: none;
  position: absolute;
}

a {
  font-size: 14px;
  color: #D53865;
  font-weight: bold;
  letter-spacing: 1px;
  text-decoration: none;
}

.added {
  display: none;
}

如何在尊重原始布局的下拉菜单中设置固定位置？

How to set fixed positions in dropdowns respecting the original layout?

html

css

css-position

drop-down-menu

dropdown