如何为已创建的自定义flexbox导航栏添加下拉菜单？

问题说明 #

我创建了一个自定义flexbox导航栏，各项功能均符合预期，仅存在一处问题：我需要为部分导航栏项添加下拉菜单，目前已尝试了所有能找到的相关资源都未能成功实现。部分格式看起来有些特殊，这是Real Geeks平台的编辑规则要求导致的。

修复方案 #

你的代码存在三处核心错误导致下拉菜单失效：

1. CSS中@import规则放在了普通样式之后，不符合CSS规范，会导致字体加载失效
2. 所有下拉触发的input标签id重复，id必须全局唯一，导致点击触发逻辑完全失效
3. 子菜单定位逻辑错误，一级子菜单设置为相对定位、子菜单项设置为绝对定位会导致菜单渲染错位，无法正常显示

修正后CSS代码 #

/* @import必须放在CSS最顶部 */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.bg-palette-navigationBackground-color {
  background-color: transparent;
}

body {
  background: transparent;
  font-size: 1.1em;
  line-height: 1.45em;
  color: #ffffff;
  margin: 0;
  padding: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
}

a {
  color: #FFF;
}

p {
  text-align: center;
}

.toggle,
[id^=drop] {
  display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: #404041;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
}

#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 0.9em;
  line-height: 1.45em;
}

#logo img{
  display: none;
  padding: 0 15px;
  float: left;
  max-width: 25%;
}


#main-toggle {
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.nav-icon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  width: 18px;
}

.nav-icon:before,
.nav-icon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}

.nav-icon:before {
  top: 5px;
}

.nav-icon:after {
  top: -5px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #404041;
  /* 父级菜单项设为相对定位，作为子菜单定位参考 */
  position: relative;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 1.1em;
  line-height: 2.5em;
  text-decoration: none;
}

nav ul li ul li:hover {
  text-decoration: overline 3px #beaf87;
}

nav a:hover {
  text-decoration: overline 3px #beaf87;
}

/* 一级子菜单设为绝对定位，吸附在父菜单项底部 */
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: max-content;
}

nav ul li:hover>ul {
  display: inherit;
}

nav ul ul li {
  width: 100%;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul li {
  position: relative;
  top: 0;
  left: 100%;
}

li>a:after {
  content: '';
}

li>a:only-child:after {
  content: '';
}


/* 响应式适配 */
@media all and (max-width : 768px) {

  nav {
    margin: 0;
  }
  nav ul{
    float:none;
  }
  .toggle+a,
  .menu {
    display: none;
  }

  .toggle {
    display: block;
    background-color: #404041;
    padding: 0 20px;
    color: #FFF;
    font-size: 1.1em;
    line-height: 2.5em;
    text-decoration: none;
    border: none;
  }

  .toggle:hover {
  text-decoration: overline 3px #beaf87;
  }

  [id^=drop]:checked+ul {
    display: block;
  }

  nav ul li {
    display: block;
    width: 100%;
  }

  nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

  nav ul ul ul a {
    padding: 0 80px;
  }

  nav ul ul ul a {
    background-color: #404041;
  }

  nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #404041;
  }

  nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }

  nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

  nav ul ul li {
    display: block;
    width: 100%;
  }

  nav ul ul ul li {
    position: static;

  }
}

修正后HTML代码 #

<nav>
  <label id="main-toggle" class="toggle" for="drop"><span class="nav-icon"></span></label>
  <input id="drop" type="checkbox" />
  <ul class="menu">
    <li><a href="#">HOME</a></li>
    <li>
      <!-- 第一级下拉菜单 -->
      <label class="toggle" for="drop-1">SELLER SERVICES</label>
      <a href="#">SELLER SERVICES</a>
      <input id="drop-1" type="checkbox" />
      <ul>
        <li><a href="#">SERVICES OVERVIEW</a></li>
        <li><a href="#">INSTANT HOME VALUATION</a></li>
      </ul>
    </li>
    <li>
      <!-- 第一级下拉菜单 -->
      <label class="toggle" for="drop-2">BUYER SERVICES</label>
      <a href="#">BUYER SERVICES</a>
      <input id="drop-2" type="checkbox" />
      <ul>
        <li><a href="#">SERVICES OVERVIEW</a></li>
        <li><a href="#">FINANCING</a></li>
      </ul>
    </li>
    <li><a href="#">RELOCATION</a></li>
    <li><a href="#">MILITARY SERVICES</a></li>
    <li>
      <!-- 第一级下拉菜单 -->
      <label class="toggle" for="drop-3">FIND AN AGENT</label>
      <a href="#">FIND AN AGENT</a>
      <input id="drop-3" type="checkbox" />
      <ul>
        <li><a href="#">BOILING SPRINGS OFFICE</a></li>
        <li><a href="#">SPARTANBURG OFFICE</a></li>
        <li><a href="#">GREENVILLE OFFICE</a></li>
      </ul>
    </li>
    <li>
      <!-- 第一级下拉菜单 -->
      <label class="toggle" for="drop-4">ABOUT</label>
      <a href="#">ABOUT</a>
      <input id="drop-4" type="checkbox" />
      <ul>
        <li><a href="#">CENTURY 21 BLACKWELL</a></li>
        <li><a href="#">CENTURY 21</a></li>
        <li><a href="#">CONTACT US</a></li>
      </ul>
    </li>
    <li><a href="#">CAREERS</a></li>
    <li><a href="#">AGENT PORTAL</a></li>
  </ul>
</nav>

内容的提问来源于stack exchange，提问作者Eric Branan