当前位置：首页 > 文章列表 > 文章 > 前端 > 下拉菜单显示不全怎么解决？

下拉菜单显示不全怎么解决？

2025-08-17 10:21:28 0浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《下拉菜单显示不全怎么解决》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

解决CSS下拉菜单显示不全的问题

本文针对CSS下拉菜单子菜单显示不全的问题，提供详细的解决方案。通过分析问题代码，找出导致子菜单重叠的原因，并提供修改后的CSS代码，修复了子菜单的显示问题，同时优化了hover效果。适合初学者学习和参考，帮助开发者构建更完善的下拉菜单。

问题分析

在创建多级下拉菜单时，可能会遇到子菜单无法完全显示，而是相互重叠，只显示最后一个子菜单的情况。这通常是由于CSS定位属性设置不当造成的。具体来说，如果将子菜单的li元素设置为position: absolute，会导致它们脱离文档流，叠加在一起。

解决方案

要解决这个问题，需要移除子菜单li元素的position: absolute属性。以下是修改后的CSS代码：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header {
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
}

header .menu {
  margin: 0px;
  background-color: orange;
}

header nav ul {
  margin: 0px;
}

a {
  text-decoration: none;
}

.menu ul li {
  display: inline-block;
  margin: 20px;
  padding: 20px;
  font-weight: bold;
  color: black;
}

ul li:hover {
  background-color: rgb(132, 127, 127);
  color: rgb(249, 249, 249);
}

.sub-menu1 {
  width: 200px;
  display: none;
  background-color: orange;
  position: absolute;
  margin-left: -20px !important;
  padding: 0px !important;
  transform: translateY(20px);
}

.sub-menu1 li {
  width: 200px;
  margin: 0px !important;
}

.dropdown_menu:hover ul {
  display: block;
}

.sub-menu1 li:hover {
  background-color: rgb(103, 197, 109);
  color: rgb(249, 249, 249);
}

.sub-host ul li {
  width: 200px;
  background-color: green;
  display: none;
  margin: 0px !important;
  padding: 20px !important;
  transform: translate(140px, -55px);
}

.sub-domain ul li {
  width: 200px;
  background-color: green;
  display: none;
  margin: 0px !important;
  padding: 20px !important;
  transform: translate(140px, -55px);
}

.sub-domain ul li {
  display: none;
}

.sub-host:hover li {
  display: block;
}

.sub-domain:hover li {
  display: block;
}

.sub-menu2,
.sub-menu3 {
  position: absolute;
  height: 0;
}

在这个修改后的代码中，.sub-host ul li 和 .sub-domain ul li 的 position: absolute 属性被移除。同时，为了避免hover效果出现问题，增加了.sub-menu2, .sub-menu3 {position: absolute; height: 0;}。

HTML代码示例

以下是对应的HTML代码：

<html lang="en">

<head>

  <meat charset="UTF-8">
    <meta name="viewport" content="width=device-width, intital-scale=1.0">

    <title> Dropdown Menu </title>

    <link rel="stylesheet" href="style.css">


</head>

<body>

  <header>

    <nav class="menu">

      <ul>

        <a href="#">
          <li> Home </li>
        </a>
        <li> About us </li>
        <li> Contact us </li>
        <li class="dropdown_menu">
          Services
          <ul class="sub-menu1">

            <li class="sub-host">
              Host
              <ul class="sub-menu2">
                <li>1-month</li>
                <li>3-month</li>
                <li>6-month</li>
                <li>12-month</li>


              </ul>



            </li>

            <li class="sub-domain">
              Domain
              <ul class="sub-menu3">
                <li>.ir</li>
                <li>.com</li>
                <li>.org</li>
              </ul>

            </li>


          </ul>

        </li>


      </ul>

    </nav>

  </header>


</body>


</html>