使用CSS将HTML列表转换为嵌套下拉菜单问题求助

直接给你能正常工作的代码，再讲问题出在哪：

正确的HTML结构 #

<nav class="dropdown-nav">
  <button class="dropdown-btn">主菜单</button>
  <ul class="dropdown-menu">
    <li>
      <a href="#">选项1</a>
      <ul class="sub-dropdown">
        <li><a href="#">子选项1-1</a></li>
        <li><a href="#">子选项1-2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">选项2</a>
      <ul class="sub-dropdown">
        <li><a href="#">子选项2-1</a></li>
        <li><a href="#">子选项2-2</a></li>
      </ul>
    </li>
  </ul>
</nav>

对应的CSS（解决样式异常） #

/* 重置所有下拉列表的默认样式，彻底去掉项目符号 */
.dropdown-menu, .sub-dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 默认隐藏下拉菜单 */
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #eee;
}

/* 主按钮悬停/点击时显示主下拉菜单 */
.dropdown-btn:hover + .dropdown-menu,
.dropdown-menu:hover {
  display: block;
}

/* 子菜单容器悬停时显示子菜单 */
.dropdown-menu li:hover .sub-dropdown {
  display: block;
  left: 100%;
  top: 0;
}

/* 基础布局调整，避免排版混乱 */
.dropdown-nav {
  position: relative;
  display: inline-block;
}

.dropdown-menu li {
  position: relative;
  padding: 8px 16px;
}

.dropdown-btn {
  padding: 8px 16px;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: #333;
}

问题根源分析 #

你之前的CSS大概率犯了这几个错误之一：

• 只给外层<ul>加了list-style: none，嵌套的子列表没设置，导致项目符号残留；
• 错误地给<li>或<a>标签加了display: none，或者设置了color: transparent这类属性，导致文本消失；
• 没重置列表默认的padding和margin，项目符号被挤压到视野外，看起来像文本消失。

用上面的代码，既保留了悬停/点击触发的交互，又彻底解决了样式异常问题，你可以根据需求调整颜色、间距这些细节。

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