嘿,所以我制作了一个网站主页并添加了一个导航栏,但是一个小问题让我大吃一惊,我似乎无法解决它。我在其中一个链接中添加了悬停效果和下拉菜单。它工作正常,但下拉菜单显示在下 zipper 接旁边。我似乎无法让它像普通下拉菜单一样放在链接下方。请告诉我哪里出错了。
HTML:
<!--Navigation bar-->
<div id="Navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Info</a>
<ul>
<li><a>Support</a></li>
<li><a>Privacy</a></li>
<li><a>Terms</a></li>
<li><a>Cookies</a></li>
</ul>
</li>
</ul>
</nav>
</div>
CSS:
#Navbar
{
height: 65px;
background-color: #0009;
line-height: 65px;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
nav ul
{
float: right;
margin-right: 30px;
}
nav ul li
{
list-style: none;
display: inline-block;
}
nav ul li a
{
font-weight: bolder;
color: white;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 50px;
padding-left: 50px;
}
nav ul li a:hover
{
background-color: #A52A2A;
text-decoration: none;
color: black;
transition: 0.4s;
}
nav ul li ul li
{
display: none;
}
nav ul li:hover ul li
{
display: block;
background-color: #000000;
color: white;
font-weight: bolder;
text-align: center;
}
是这样的
最佳答案
我只是对您的代码进行了一些小改动,希望对您有所帮助。谢谢
#Navbar
{
height: 65px;
background-color: #0009;
line-height: 65px;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
nav ul
{
margin: 0;
padding: 0;
}
nav ul li
{
list-style: none;
display: inline-block;
position: relative;
}
nav ul li a
{
font-weight: bolder;
color: white;
padding: 22px 40px;
text-decoration: none;
}
nav ul li ul
{
display: none;
position: absolute;
}
nav ul li:hover ul
{
display: block;
background-color: #000000;
color: white;
font-weight: bolder;
text-align: center;
}
nav ul li:hover > a
{
background-color: #A52A2A;
color: black;
transition: 0.4s;
}
<div id="Navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Info</a>
<ul>
<li><a>Support</a></li>
<li><a>Privacy</a></li>
<li><a>Terms</a></li>
<li><a>Cookies</a></li>
</ul>
</li>
</ul>
</nav>
</div>
关于html - 为什么我的下拉菜单横向悬停而不是向下列出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59298373/