为什么CSS悬停效果不会只覆盖我的下拉菜单？

Question

在第一张照片中，我的光标悬停在右上角的标语上。如果有人可以告诉我我需要进行的调整，以便当我将鼠标悬停在它上面时，我的下拉菜单才会显示下来，我们将非常感激。

HTML：

<ul class="dropdown">
    <li>Menu</li>
    <ul class="dropdownElements">
        <li><a href="About.html"/>About</li>
        <li><a href="Vintage.html"/>Vintage Products</li>
        <li><a href="Antique.html"/>Antique Products</li>
        <li><a href="Collectibles.html"/>Collectibles</li>
        <li><a href="Contact.html"/>Contact Information</li>
    </ul>
</ul>

CSS：

* {
    margin: 0px;
    padding: 0px;
}

div.header ul.dropdown {
    position: absolute;
    margin: auto;
    list-style: none;
    margin-left: 190px;
    position: relative;
    top: 40px;
}

div.header ul.dropdown li {
    background-color: white;
    height: 45px;
    width: 135px;
    line-height: 45px;
    border-radius: 5px;
    box-shadow: 1px 3px 5px black;
    text-align: center
}

ul.dropdownElements li {
    list-style: none;
}

div.header ul.dropdown li:hover {
    background-color: #C5A06D;
    transition: background linear 0.2s;
}

div.header ul ul {
    visibility:hidden;
} 

div.header ul:hover ul {
    visibility:visible;
}

a:link {
    text-decoration: none;
    color: black;
}

Answer 1

见下文。我已经在几个地方删除了div.header，因为该元素不在HTML中并且阻止CSS工作。

基本更改：列出相对位置的顶级菜单的项目，子菜单位于绝对位置。

* {
  margin: 0px;
  padding: 0px;
}

ul.dropdown {
  position: relative;
  margin: auto;
  list-style: none;
  margin-left: 190px;
  position: relative;
  top: 40px;
}

div.header ul.dropdown li {
  background-color: white;
  height: 45px;
  width: 135px;
  line-height: 45px;
  border-radius: 5px;
  box-shadow: 1px 3px 5px black;
  text-align: center
}

ul.dropdownElements {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
}

ul.dropdownElements li {
  list-style: none;
}

div.header ul.dropdown li:hover {
  background-color: #C5A06D;
  transition: background linear 0.2s;
}

ul.dropdown li:hover ul.dropdownElements {
  display: inline-block;
}

a:link {
  text-decoration: none;
  color: black;
}

<ul class="dropdown">
  <li>Menu
    <ul class="dropdownElements">
      <li><a href="About.html" />About</li>
      <li><a href="Vintage.html" />Vintage Products</li>
      <li><a href="Antique.html" />Antique Products</li>
      <li><a href="Collectibles.html" />Collectibles</li>
      <li><a href="Contact.html" />Contact Information</li>
    </ul>
  </li>
</ul>