Why won't CSS hover effect cover only my dropdown menu? - html

Question

In the first photo, my cursor is hovering over the slogan in the top right corner. If someone could tell me the adjustments I need to make so that my dropdown menu only comes down when I hover over it, it would be much appreciated.
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

See below. I have removed div.header at a few places because that element isn't in the HTML and stops the CSS from working.
Essential changes: list items of the top level menu positioned relative, submenu positioned absolute.
* {
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>