不使用CSS子组合器实现导航下拉菜单的布局问题求助

DevOps 小满

2026-8-17

导航下拉菜单移位及长度不一致问题

之前问过导航下拉菜单内容超出主导航范围的问题，因为没完全搞懂CSS子组合器（child combinator）的用法，就试着不用它写CSS样式。现在导航样式是实现了，但鼠标悬停下拉菜单时，菜单会移位，而且各个下拉菜单长度不一样。

现有代码

CSS代码

/***** whole navigation bar *****/

nav#nav-content {
  display: grid;
  place-items: center;
  font-faimily: "Gill Sans", sans-serif;
  font-size: 13.7px;
}

nav#nav-content ul {
  grid-auto-flow: column;
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

nav#nav-content {
  /*selects whole <li> tags under <nav> tag */
  position: relative;
  /*to provide boundry*/
  margin: 0;
  padding: 0;
}


/***** all links *****/

ul#exo-menu a:link
/* all normal, unvisitied links under <ul> */

{
  display: block;
  text-decoration: none;
  background-color: #0E0E10;
  /* jet black */
  color: #FFFAFA;
  /* olde lace */
  margin: 0;
  padding: 6.5px 13px;
}

ul#exo-menu a:visited
/* visited link */

{
  background-color: #F5F5F5;
  /* white smoke */
  color: #1A1110;
  /* licorice */
}

ul#exo-menu a:hover
/* mouse over link, must come after <a:link> and <a:visited> */

{
  background-color: #242124;
  /* raiden */
  color: #FFFFF0;
  /* ivory */
}

ul#exo-menu a:active
/* a link that's selected - must come after <a:hover> */

{
  background-color: #D3D3D3;
  color: #808080;
}


/* disables links */

nav#nav-content div.cursor {
  /* Since pointer-event: none;disables all mouse functions, wrap  disabled link with a div tag, and then add the cursor input.*/
  cursor: not-allowed;
}

nav#nav-content a.disabledLink {
  pointer-events: none;
}


/***** all <button> tags *****/

button.dropbtn {
  outline: none;
  border: none;
  font: inherit;
  /* Important for vertical align on mobile phones */
  background-color: #0E0E10;
  /* jet black */
  color: #FFFAFA;
  /* olde lace white */
  /* width: 100% */
  margin: 0;
  /* Important for vertical align on mobile phones */
  padding: 6.5px 13px;
  cursor: pointer;
}

button.dropbtn:hover {
  background-color: #242124;
  /* raiden */
  color: #FFFFF0;
  /* ivory */
}

button.dropbtn:active {
  background-color: #D3D3D3;
  color: #808080;
}


/***** submenu positioning *****/

.dropdown {
  float: left;
  overflow: hidden;
}

.submenu {
  /* dropdown content hidden by defualt */
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .submenu {
  display: block;
  position: absolute;
  /*to keep it under relative li*/
}

HTML代码

<nav class="topnav" id="nav-content">
  <ul id="exo-menu">
    <li class="dropdown simple">
      <button type="button" onclick="togglefolder('folder0');" class="dropbtn main" aria-expanded="false">Main Investigators
                <i class="fa fa-angle-double-down"></i>
            </button>
      <ul class="submenu">
        <li class="option"><a href="#" title="Zak Bagans">Zak Bagans</a></li>
        <li class="option"><a href="#" title="Nick Groff">Nick Groff</a></li>
        <li class="option"><a href="#" title="Cindy Kaza">Cindy Kaza</a></li>
        <li class="option">
          <button type="button" onclick="alert('Go to their link')" class="dropbtn" id="btnAlert">The Ghost Brothers
                        <i class="fa fa-angle-double-down"></i>
                    </button>
        </li>
        <li class="option"><a href="#" title="Aaron Goodwin">Aaron Goodwin</a></li>
        <li class="option"><a href="#" target="_blank" title="Jason Hawes">Jason Hawes</a></li>
        <li class="option"><a href="#" title="Kim Russo">Kim Russo</a></li>
        <li class="option"><a href="#" title="Elizabeth Saint">Elizabeth Saint</a></li>
        <li class="option"><a href="#" title="K.D. Stafford">K.D. Stafford</a></li>
        <li class="option"><a href="#" title="Dave Schrader">Dave Schrader</a></li>
        <li class="option"><a href="#" title="Billy Tolley">Billy Tolley</a></li>
        <li class="option"><a href="#" title="Jay Wasley">Jay Wasley</a></li>
      </ul>
    </li>
    <li class="dropdown mega">
      <button type="button" onclick="togglefolder('folder0');" class="dropbtn main" aria-expanded="false" title="families who investigate unexplained phenomena, generally pertaining to ghosts">Paranormal Hunting Families
                <i class="fa fa-angle-double-down"></i>
            </button>
      <ul class="submenu">
        <li class="option">
          <div class="parafamily">
            <p class="para-paragraph-fam">Holzers</p>
            <a href="#" title="Professor Dr. Hans Holzer, Ph.D.">Dr. Hans Holzer <span class="cross">†</span></a>
            <div class="box">
              <span class="paraspouse">Spouses</span>
              <a href="#" title="Alexandra Holzer">Alexandra Holzer</a>
              <a href="#" title="David Lawson">David Lawson</a>
            </div>
          </div>
          <div class="parafamily">
            <p class="para-paragraph-fam">Klinge</p>
            <div class="box">
              <span class="parasibs">Sibling</span>
              <a href="#" title="Barry Klinge">Barry Klinge</a>
              <a href="#" title="Brad Klinge">Brad Klinge</a>
            </div>
          </div>
          <div class="parafamily">
            <p class="para-paragraph-fam">Osbournes</p>
            <div class="box">
              <span class="parasibs">Sibling</span>
              <a href="#" title="Kelly Osbourne">Kelly Osbourne</a>
              <a href="#" title="Jack Osbourne">Jack Osbourne</a>
            </div>
            <div class="box">
              <span class="paraspouse">Spouses</span>
              <a href="#" title="Sharon Levy">Sharon Levy-Arde</a>
              <a href="#" title="Ozzy Osborne">Ozzy Osborne</a>
            </div>
          </div>
          <div class="parafamily">
            <p class="para-paragraph-fam">Warren</p>
            <div class="box">
              <span class="paraspouse">Spouses</span>
              <a href="#" title="Edward Miney">Edward Warren Miney <span class="cross">†</span></a>
              <a href="#" title="Lorraine Warren">Lorrain Moran <span class="cross">†</span></a>
            </div>
          </div>
          <div class="parafamily">
            <p class="para-paragraph-fam">Zaffis</p>
            <div class="box">
              <span class="parasibs">Siblings</span>
              <a href="#" title="Aime'e Zaffis">Aime'e Zaffis</a>
              <a href="#" title="Chris Zaffis">Chris Zaffis</a>
            </div>
            <a href="#" title="John Zaffis">John Zaffis</a>
          </div>
        </li>
        <li class="option">
          <button type="button" onclick="togglefolder('folder0');" class="dropbtn previous">Former
                        <i class="caret-down"></i>
                    </button>
          <div class="parafamily">
            <p class="para-paragraph-fam">Lowe</p>
            <div class="box">
              <span class="parasibs">Siblings</span>
              <a href="#" title="John Lowe">John Lowe</a>
              <a href="#" title="Matthew Lowe">Matthew Lowe</a>
            </div>
            <a href="#" title="Rob Lowe">Rob Lowe</a>
          </div>
        </li>
      </ul>
    </li>
    <li class="dropdown horizontal">
      <button type="button" onclick="togglefolder('folder0');" class="dropbtn  main-btn" aria-expanded="false" title="Best friends from Atlanta">The Ghost Brothers
                <i class="fa fa-angle-double-down"></i>
            </button>
      <ul class="submenu simple">
        <li class="option"><a href="#Dalen" title="Dalen Spratt">Dalen Spratt</a></li>
        <li class="option"><a href="#JuwanMass" title="Juwan Mass">Juwan Mass</a></li>
        <li class="option"><a href="#">Marcus Harvey</a></li>
      </ul>
    </li>
  </ul>
</nav>

问题修复方案

1. 解决下拉菜单移位问题

给.dropdown添加position: relative，让子级.submenu以当前下拉按钮容器为定位基准，而非整个导航栏
移除.dropdown的float: left，因为父级ul#exo-menu已经用grid-auto-flow: column实现横向排列，浮动会导致布局冲突

2. 解决下拉菜单长度不一致问题

给.dropbtn设置width: 100%，确保所有导航按钮宽度一致
给.submenu设置width: 100%、left: 0、top: 100%，让下拉菜单宽度和父级按钮对齐，且紧贴按钮底部
清除.submenu及其子元素的默认内外边距和列表样式，避免额外间距干扰

修改后的CSS代码

/***** whole navigation bar *****/

nav#nav-content {
  display: grid;
  place-items: center;
  font-family: "Gill Sans", sans-serif; /* 修正拼写错误 */
  font-size: 13.7px;
}

nav#nav-content ul {
  grid-auto-flow: column;
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

nav#nav-content {
  position: relative;
  margin: 0;
  padding: 0;
}


/***** all links *****/

ul#exo-menu a:link {
  display: block;
  text-decoration: none;
  background-color: #0E0E10;
  color: #FFFAFA;
  margin: 0;
  padding: 6.5px 13px;
}

ul#exo-menu a:visited {
  background-color: #F5F5F5;
  color: #1A1110;
}

ul#exo-menu a:hover {
  background-color: #242124;
  color: #FFFFF0;
}

ul#exo-menu a:active {
  background-color: #D3D3D3;
  color: #808080;
}


/* disables links */

nav#nav-content div.cursor {
  cursor: not-allowed;
}

nav#nav-content a.disabledLink {
  pointer-events: none;
}


/***** all <button> tags *****/

button.dropbtn {
  outline: none;
  border: none;
  font: inherit;
  background-color: #0E0E10;
  color: #FFFAFA;
  margin: 0;
  padding: 6.5px 13px;
  cursor: pointer;
  width: 100%; /* 按钮撑满父容器 */
}

button.dropbtn:hover {
  background-color: #242124;
  color: #FFFFF0;
}

button.dropbtn:active {
  background-color: #D3D3D3;
  color: #808080;
}


/***** submenu positioning *****/

.dropdown {
  position: relative; /* 作为子级绝对定位的基准 */
}

.submenu {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%; /* 和父级按钮同宽 */
  left: 0; /* 对齐父级左侧 */
  top: 100%; /* 紧贴父级底部 */
  padding: 0;
  margin: 0;
}

.submenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown:hover .submenu {
  display: block;
}

内容的提问来源于stack exchange，提问作者Jay Bird

不使用CSS子组合器实现导航下拉菜单的布局问题求助

现有代码 #

CSS代码 #

HTML代码 #

问题修复方案 #

1. 解决下拉菜单移位问题 #

2. 解决下拉菜单长度不一致问题 #

修改后的CSS代码 #

现有代码

CSS代码

HTML代码

问题修复方案

1. 解决下拉菜单移位问题

2. 解决下拉菜单长度不一致问题

修改后的CSS代码