嘿,所以我做了一个网站主页,并添加了一个导航栏,但一个小问题让我大吃一惊,我似乎无法绕过它。我在其中一个链接中添加了悬停效果和下拉菜单。它工作正常,但下拉菜单显示在下拉链接旁边。我似乎无法让它像普通的下拉菜单一样放在链接下方。请告诉我哪里出错了。
HTML:
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;
}
这是它的样子