html - 为什么我的下拉菜单是横向悬停而不是向下列出?

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

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;

}

这是它的样子