如何将下拉菜单设置为水平显示而非垂直显示？

只需修改下拉菜单容器的样式，即可将垂直布局改为水平排列，以下是调整后的完整代码及关键说明：

修改后的完整CSS代码 #

nav ul {
    background-color: lightgray;
    display: flex;
    list-style: none;
    overflow: visible;
    padding: 0; /* 去除默认内边距，优化布局 */
    margin: 0; /* 去除默认外边距 */
}
  
nav ul li {
    margin-right: 20px;
    position: relative;
    padding: 10px 0; /* 扩大hover/点击交互区域 */
}

nav ul li a {
    letter-spacing: 1px;
    font-size: 20px;
    background-color: lightgray;
    color: black;
    text-decoration: none;
    padding: 10px; /* 扩大链接点击范围 */
}

nav ul li a:hover{
    color: white;
}

/* 下拉菜单容器 */
.dropdown {
  position: relative;
  display: inline-block;
}

/* 核心修改：将下拉内容改为水平布局 */
.dropdown-content {
  position: absolute;
  background-color: lightgray;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: transform .25s ease-in;
  transform: scale(0.1, 0.1);
  transform-origin: 0 100%; /* 调整展开原点为父菜单底部左侧，避免错位 */
  opacity: 0;
  display: flex; /* 使用flex实现水平排列 */
  min-width: auto; /* 取消固定宽度，适配内容 */
  padding: 0; /* 去除默认内边距 */
  margin: 0; /* 去除默认外边距 */
}

/* 下拉链接样式 */
.dropdown-content a {
  color: #333;
  padding: 12px 18px;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap; /* 防止选项文字换行 */
}

.dropdown-content a:hover {
  background-color: grey;
}

/* 鼠标悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
  opacity: 1;
  transform: scale(1, 1);
}

关键修改点 #

• 给.dropdown-content添加display: flex，强制子元素水平排列
• 替换min-width: 160px为min-width: auto，让菜单宽度随内容自适应
• 调整transform-origin为0 100%，确保下拉菜单从父菜单底部左侧展开，避免偏移
• 优化父元素内边距、外边距，提升交互体验

原问题代码参考 #

HTML代码 #

<nav>
    <ul>
      <li><a href="index.html">Our Story</a></li>
      <li class="dropdown">
        <a href="#">Specialists</a>
        <ul class="dropdown-content">
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
        </ul>
      </li>
      <li><a href="#">Training</a></li>
      <li><a href="#">DBS</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

原CSS代码 #

nav ul {
    background-color: lightgray;
    display: flex;
    list-style: none;
    overflow: visible;
  }
  
nav ul li {
    margin-right: 20px;
    position: relative;
  }

nav ul li a {
    letter-spacing: 1px;
    font-size: 20px;
    background-color: lightgray;
    color: black;
    text-decoration: none;
  }

nav ul li a:hover{
    color: white;
  }

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: lightgray;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: transform .25s ease-in;
  transform: scale(0.1, 0.1);
  transform-origin: 0 0;
  opacity: 0;
}

.dropdown-content a {
  color: #333;
  padding: 12px 18px;
  text-decoration: none;
  display: block;
  font-size: 14px;
}

.dropdown-content a:hover {
  background-color: grey;
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  transform: scale(1, 1);
}

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