Navbar下拉菜单内容溢出容器求助：如何让容器自适应宽度？

刚接触HTML和CSS，正在制作个人项目网站，目前导航栏的下拉菜单链接总是溢出背景容器，界面显得杂乱。想让下拉菜单的背景容器能自适应下拉项的宽度。

相关代码 #

CSS代码 #

/* navigation section!! */
#navbar {
  height: 40px;
  background-color: #13092D;
  /* navbar color */
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 5px;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
  align-items: center;
}

#navbar li ul {
  position: absolute;
  display: flex;
  left: 0;
  top: 100%;
  width: 100%;
}

#navbar li {
  padding-top: 8px;
}

/* navigation links*/
#navbar li a {
  color: #ED64F5;
  /* navbar text color */
  font-weight: 800;
  text-decoration: none;
  /* this removes the underline */
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
  color: #a49cba;
  text-decoration: underline;
}

#navbar ul li {
  list-style: none;
  padding: 5px;
  position: relative;
  display: block;
}

#navbar ul li a {
  color: #ED64F5;
  text-decoration: none;
  padding: 5px 10px;
}

#navbar ul li a:hover {
  background: #13092D;
  text-decoration: none;
}

#navbar ul li ul {
  display: none;
  background: #241445;
}

#navbar ul li:hover ul {
  display: block;
  position: absolute;
  margin-top: 5px;
  background: #241445;
  padding: 10px 2px;
}

#flex {
  display: flex;
}

HTML代码 #

<div id="container">
            <div id="headerArea">
                <div id="header"></div>
                <nav id="navbar">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Cheskel</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Iu</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Visir</a>
                          <ul class="drop-menu">
                                <li><a href="#">Language</a></li>
                                <li><a href="#">Culture</a></li>
                                <li><a href="#">Individuals</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sunit</a>
                        </li>
                        <li><a href="#">Flora/Fauna</a>
                          <ul class="drop-menu">
                                <li><a href="#">Crystal</a></li>
                                <li><a href="#">Fauna</a></li>
                                <li><a href="#">Flora</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Locations</a>
                          <ul class="drop-menu">
                                <li><a href="#">Glass Desert</a></li>
                                <li><a href="#">Wish Peak</a></li>
                            </ul>
                        <li><a href="#">Extras</a>
                        </li>
                        <li><a href="#">Fan Creations</a>
                        </li>
                    </ul>
                </nav>
            </div>

修复方案 #

问题出在下拉菜单的宽度设置和布局方式上，按以下步骤修改CSS即可解决：

1. 移除下拉菜单的强制宽度：删除#navbar li ul中的width: 100%，这个属性会让下拉菜单强制占满父元素宽度，导致内容溢出容器。
2. 让下拉菜单自适应内容宽度：给下拉菜单添加min-width: max-content，这样容器会自动适配最长的下拉项文字宽度；同时把下拉菜单的布局从flex改为block，让下拉项垂直排列，避免横向挤压。
3. 调整内边距：将下拉菜单的padding调整为10px，让背景完全包裹文字，避免左右留白不足导致的内容溢出。

修改后的关键CSS代码片段：

#navbar li ul {
  position: absolute;
  left: 0;
  top: 100%;
  /* 移除width:100% */
}

#navbar ul li ul {
  display: none;
  background: #241445;
  min-width: max-content; /* 让容器自适应内容宽度 */
  padding: 10px; /* 调整内边距 */
}

#navbar ul li:hover ul {
  display: block;
  position: absolute;
  margin-top: 5px;
  background: #241445;
  padding: 10px; /* 同步调整内边距 */
}

这样修改后，下拉菜单的背景容器就会自动适配下拉项的宽度，不会再出现内容溢出的情况。

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