下拉导航栏的问题答案

【问题标题】：problems with dropdown nav bar下拉导航栏的问题
【发布时间】：2020-09-03 05:44:07
【问题描述】：

我的导航栏有问题。制作一个的过程已经完成，但是当我将鼠标悬停在我的nav 上并且我的子导航出现时，它下面的所有文本都会向下移动。

我该如何解决这个问题？

这是一个演示问题的代码 sn-p，将鼠标悬停在 TAKKEN 上即可查看问题：

.horizontal {
  list-style-type: none;
  margin: 40 auto;
  width: 640px;
  padding: 0;
  overflow: hidden;
}

.horizontal>li {
  float: left;
}

.horizontal li ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  width: 100%;
}

.horizontal li:hover ul {
  display: block;
}

.horizontal li a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 22px 10px;
  font-family: arial;
  font-size: 8pt;
  font-weight: bold;
  color: #FFFFFF;
  text-transform: uppercase;
  border-right: 1px solid #607987;
  background-color: #006600;
  letter-spacing: .08em;
}

.horizontal li a:hover {
  background-color: darkorange;
  color: #a2becf
}

.horizontal li:first-child a {
  border-left: 0;
}

.horizontal li:last-child a {
  border-right: 0;
}

<nav id="mainnav">
  <ul class="horizontal">
    <li><a href="#">Home</a></li>
    <li><a href="">Planning</a></li>
    <li><a href="">Takken</a>
      <ul>
        <li><a href="">Kapoenen</a></li>
        <li><a href="">Kawellen</a></li>
        <li><a href="">Kajoo's</a></li>
        <li><a href="">Jojoo's</a></li>
        <li><a href="">Givers</a></li>
        <li><a href="">Jin</a></li>
        <li><a href="">Akabe</a></li>
      </ul>
    </li>
    <li><a href="" title="">Kleding</a></li>
    <li><a href="" title="">Contact</a>
      <ul>
        <li><a href="">Leiding</a></li>
        <li><a href="">Verhuur</a></li>
      </ul>
    </li>
    <li><a href="" title="">Inschrijven</a></li>
  </ul>
</nav>

Here is some text below the nav.

Image showing the problem

【问题讨论】：

你能不能至少张贴一张问题的图片，也许是截图
@rilla 当你看到你的帖子有太多代码的消息时，请不要添加填充文本——消息的存在是有原因的！相反，请尝试改进您对问题的解释，并感谢系统帮助您提出更好的问题。我建议进行编辑以改进您的帖子。另一个注意事项：代码 sn-ps 对于演示此类问题非常有用，请再次查看我的编辑建议。
@rilla 对，我想我们都误解了你的问题，认为这与其他 nav 元素移到一边有关。图像现在澄清了这一点，我会尝试更新我的答案。
@rilla 我现在已更新我的答案以与您的图像相关。运行代码 sn -p 看一个演示——nav 下的文本不再像以前那样向下移动。

标签： css drop-down-menu navigation

【解决方案1】：

尝试给 li 元素一个固定的宽度。

检查一下：

.horizontal {
    list-style-type: none;
    margin: 40 auto;
    width: 640px;
    padding: 0;
    overflow: hidden;
}

.horizontal > li {
    float: left;
    width: 6rem;
}

.horizontal li ul{
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;

}

.horizontal li:hover ul {
    display: inline-block;
}

.horizontal li a{
    display: block;
    text-decoration: none;
    text-align: center;
    padding: 22px 10px;
    font-family: arial;
    font-size: 8pt;
    font-weight: bold;
    color:#FFFFFF;
    text-transform: uppercase;
    border-right: 1px solid #607987;
    background-color: #006600;
    letter-spacing: .08em;
}

.horizontal li a:hover {
    background-color: darkorange; 
    color:#a2becf
}

.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }

<nav id="mainnav">
            <ul class="horizontal">
                <li><a href="#">Home</a></li>
                <li><a href="">Planning</a></li>
                <li><a href="">Takken</a>
                    <ul>
                        <li><a href="">Kapoenen</a></li>
                        <li><a href="">Kawellen</a></li>
                        <li><a href="">Kajoo's</a></li>
                        <li><a href="">Jojoo's</a></li>
                        <li><a href="">Givers</a></li>
                        <li><a href="">Jin</a></li>
                        <li><a href="">Akabe</a></li>
                    </ul>
                </li>
                <li><a href="" title="">Kleding</a></li>
                <li><a href="" title="">Contact</a>
                    <ul>
                        <li><a href="">Leiding</a></li>
                        <li><a href="">Verhuur</a></li>
                    </ul>
                </li>
                <li><a href="" title="">Inschrijven</a></li>
            </ul>
        </nav>

【讨论】：

您好！感谢您对我的帖子发表评论！我尝试给我的 li 元素一个固定的宽度，但文本仍在下降...
下降是什么意思？你能进一步解释一下吗？
我在帖子里加了一张图片，我的英文不是很好
所以我猜@Run_Script 给出了你需要的答案。干净利落。

【解决方案2】：

您的nav 似乎存在两个与样式相关的问题。

当您将鼠标悬停在 TAKKEN 上时，元素会移到一边。

发生这种情况是因为文本 KAPOENEN 和 KAWELLEN 比 TAKKEN 更长，因此更宽。最快的解决方法是为nav 中的每个项目定义一个特定的宽度。

只要其中一个子导航打开，nav 下方的任何文本都会向下移动。

要解决此问题，您需要为您的nav 指定一个absolute 位置，并在HTML 中的正上方添加一个占位符div。

运行下面的代码 sn-p 来查看这两点的演示。我已使用 cmets 在 CSS 中标记了所有更改。

/* New code */

#placeholder {
  height: 100px;
}

nav {
  position: absolute;
  top: 5px;
}

/* End new code */

.horizontal {
  list-style-type: none;
  margin: 40 auto;
  width: 640px;
  padding: 0;
  overflow: hidden;
}

.horizontal>li {
  float: left;
}

.horizontal li ul {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  width: 100%;
}

.horizontal li:hover ul {
  display: block;
}

.horizontal li a {
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 22px 10px;
  font-family: arial;
  font-size: 8pt;
  font-weight: bold;
  color: #FFFFFF;
  text-transform: uppercase;
  border-right: 1px solid #607987;
  background-color: #006600;
  letter-spacing: .08em;
  
  /* New code */
  width: 80px;
}

.horizontal li a:hover {
  background-color: darkorange;
  color: #a2becf
}

.horizontal li:first-child a {
  border-left: 0;
}

.horizontal li:last-child a {
  border-right: 0;
}

<div id="placeholder"></div>

<nav id="mainnav">
  <ul class="horizontal">
    <li><a href="#">Home</a></li>
    <li><a href="">Planning</a></li>
    <li><a href="">Takken</a>
      <ul>
        <li><a href="">Kapoenen</a></li>
        <li><a href="">Kawellen</a></li>
        <li><a href="">Kajoo's</a></li>
        <li><a href="">Jojoo's</a></li>
        <li><a href="">Givers</a></li>
        <li><a href="">Jin</a></li>
        <li><a href="">Akabe</a></li>
      </ul>
    </li>
    <li><a href="" title="">Kleding</a></li>
    <li><a href="" title="">Contact</a>
      <ul>
        <li><a href="">Leiding</a></li>
        <li><a href="">Verhuur</a></li>
      </ul>
    </li>
    <li><a href="" title="">Inschrijven</a></li>
  </ul>
</nav>

Here is some text under the nav.

【讨论】：

我很高兴它对你有用！您会接受这个答案还是有任何其他问题？