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

Question

嘿，所以我制作了一个网站主页并添加了一个导航栏，但是一个小问题让我大吃一惊，我似乎无法解决它。我在其中一个链接中添加了悬停效果和下拉菜单。它工作正常，但下拉菜单显示在下 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;
}

是这样的

Answer 1

我只是对您的代码进行了一些小改动，希望对您有所帮助。谢谢

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