下拉导航栏的问题

Question

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

我该如何解决这个问题？

下面是演示问题的代码片段，将鼠标悬停在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.

显示问题的图像

Answer 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>

Answer 2

您的nav似乎有 2 个与样式相关的问题。

1. 当您将鼠标悬停在TAKKEN上时，元素会移动到一侧。

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

一旦
2. 其中一个子导航打开，nav下面的任何文本都会向下移动。

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

运行下面的代码片段以查看这两点的演示。我已经使用注释标记了我在 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.