下拉导航栏的问题
Posted
技术标签:
【中文标题】下拉导航栏的问题【英文标题】：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 下的文本不再像以前那样向下移动。
【参考方案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.【讨论】：
我很高兴它对你有用！您会接受这个答案还是有任何其他问题？以上是关于下拉导航栏的问题的主要内容，如果未能解决你的问题，请参考以下文章