如何修复损坏的下拉菜单 CSS

Question

我在创建 drop-down 菜单时遇到问题，内容不适合容器您会在第一张图片中看到我想要创建的内容以及第二张图片中发生的事情。

```
  nav {
  position: absolute;
  left: 0;
  top: 0;
  height: 20%;
  width: 98%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav img {
  width: 165px;
}

.nav_links {
  flex: 1;
  text-align: right;
}

.nav_links ul li {
  list-style: none;
  display: inline-block;
  padding: 28px 22px;
  position: relative;
}

.nav_links ul li a {
  font-family: Segoe UI;
  color: white;
  text-decoration: none;
  font-size: 25px;
}

.nav_links ul li::after {
  content: "";
  width: 0%;
  height: 2px;
  background: white;
  display: block;
  margin: auto;
  transition: 0.5s;
}

.nav_links ul li:hover::after {
  width: 100%;
}

.dropdown{
  position: absolute;
  width: 170px;
  height: 270px;
  left:0;
  right: 0;
  top:calc(85% + .15rem);
  padding: .75px;
  text-align: center;
  background-color: white;
  border-radius: 7px;
}

.dropdown li{
  position: absolute;
}
```

```
  <nav>
        <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
        <div class="nav_links" id="navLinks">
            <i class="fa fa-window-close" onclick="hideMenu()"></i>
            <ul>
                <li><a href="">Le collège</a>
                    <ul class="dropdown">
                        <li>Mot de la direction</li>
                        <li>Historique</li>
                        <li>Les enseignants</li>
                        <li>Calendrier scolaire</li>
                        <li>Fondation</li>
                    </ul>
                </li>
                <li><a href="">Vie scolaire</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Portail</a></li>
                <li><a href="">Admission</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>
```

我仍在尝试了解定位，但我一直在尝试修复此问题，但我做不到。提前致谢！编辑：我被要求显示问题，但即使我也不确定它在哪里所以我把所有 header 和导航与 CSS

Answer 1

也许使用 css max-content?

body{
background-color:black

}
  nav {
  position: absolute;
  left: 0;
  top: 0;
  height: 20%;
  width: 98%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav img {
  width: 165px;
}

.nav_links {
  flex: 1;
  text-align: right;
}

.nav_links ul li {
  list-style: none;
  display: inline-block;
  padding: 28px 22px;
  position: relative;
}

.nav_links ul li a {
  font-family: Segoe UI;
  color: white;
  text-decoration: none;
  font-size: 25px;
}

.nav_links ul li::after {
  content: "";
  width: 0%;
  height: 2px;
  background: white;
  display: block;
  margin: auto;
  transition: 0.5s;
}

.nav_links ul li:hover::after {
  width: 100%;
}

.dropdown{
  position: absolute;
  width: 170px;
  height: max-content;
  left:0;
  right: 0;
  top:calc(85% + .15rem);
  padding: .75px;
  text-align: center;
  background-color: white;
  border-radius: 7px;
}

.dropdown li{
  position: absolute;
}
```

```
  <nav>
        <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
        <div class="nav_links" id="navLinks">
            <i class="fa fa-window-close" onclick="hideMenu()"></i>
            <ul>
                <li><a href="">Le collège</a>
                    <ul class="dropdown">
                        <li>Mot de la direction</li>
                        <li>Historique</li>
                        <li>Les enseignants</li>
                        <li>Calendrier scolaire</li>
                        <li>Fondation</li>
                    </ul>
                </li>
                <li><a href="">Vie scolaire</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Portail</a></li>
                <li><a href="">Admission</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>
```

Answer 2

可以调整列表项上的填充，作为解决将它们推到所需 space 之外的间距问题的可能解决方案。

  nav {
  position: absolute;
  left: 0;
  top: 0;
  height: 20%;
  width: 98%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav img {
  width: 165px;
}

.nav_links {
  flex: 1;
  text-align: right;
}

.nav_links ul li {
  list-style: none;
  display: inline-block;
  /*RIGHT HERE*/
  padding: 8px 12px;
  position: relative;
   width: fit-content;
}

.nav_links ul li a {
  font-family: Segoe UI;
  color: white;
  text-decoration: none;
  font-size: 25px;
}

.nav_links ul li::after {
  content: "";
  width: 0%;
  height: 2px;
  background: white;
  display: block;
  margin: auto;
  transition: 0.5s;
}

.nav_links ul li:hover::after {
  width: 100%;
}

.dropdown{
  position: absolute;
  width: 170px;
  height: 270px;
  left:0;
  right: 0;
  top:calc(85% + .15rem);
  padding: .75px;
  text-align: center;
  background-color: white;
  border-radius: 7px;
}

.dropdown li{
  position: absolute;
 
}

  <nav>
        <a href="Index.html" id="logo"><img src="Images/cflogo_main.png"></a>
        <div class="nav_links" id="navLinks">
            <i class="fa fa-window-close" onclick="hideMenu()"></i>
            <ul>
                <li><a href="">Le collège</a>
                    <ul class="dropdown">
                        <li>Mot de la direction</li>
                        <li>Historique</li>
                        <li>Les enseignants</li>
                        <li>Calendrier scolaire</li>
                        <li>Fondation</li>
                    </ul>
                </li>
                <li><a href="">Vie scolaire</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Portail</a></li>
                <li><a href="">Admission</a></li>
            </ul>
        </div>
        <i class="fa fa-bars" onclick="showMenu()"></i>
    </nav>

如何修复损坏的下拉菜单 CSS

How to fix broken dropdown menu CSS

html

css

drop-down-menu