HTML CSS .dropdown:hover trouble - html

Question

I have header that is moving when I scroll my page down. I have added several buttons to it, and they are moving with it.
My problem is that my drop-button is showing its content when I am not hovering over the button itself.
My code:
/*------------------------------------dropdown menu start*/
.dropbtn {
background-color: #B9B9B9;
color: white;
font-size: 30px;
font-weight:bold;
border: none;
cursor: pointer;
position: relative;
left: 300px;
top: -18px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
left: 300px;
background-color: #ffffff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 18px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ffffff}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
color: #4d4d4d;
}
/*------------------------------------dropdown menu end*/
And a picture(black dot is a mouse location) :
What can I do to fix this?

Answer 1

Your problems run deep. I don't even really want to fix the entire menu because I'd basically be writing one from scratch and you can do that yourself, but what I will do is point out some issues with this to help you find your way:
The core of your design:
<div class="header-cont">
<div class="header">
<img src="">
<logotext>MyCompanyName</logotext>
<button>Home</button>
<div class="dropdown">
<button class="dropbtn">Products</button>
<div class="dropdown-content">
Product 1
Product 2
Product 3
</div>
</div>
<button>Locations</button>
<button>Contacts</button>
<button>History</button>
<div class="dropdown">
<button class="dropbtn">Language</button>
<div class="dropdown-content">
Language 1
Language 2
</div>
</div>
</div>
</div>
There are a number of things here I would never do:
<logotext> is not a valid HTML markup. You probably want a <span class="logotext"> or something along those lines.
Your navigation menu is comprised of <div>s with <button>s and other <div>s with <a> tags in them. This is a bizarre and confusing way to organize a menu. You should consider using <ul> tags and order your sub menu with <li> instead.
The problem you are directly running into is caused by the fact that you have your home <button> element with a left: 300px on it that your <div class="dropdown"> doesn't have.
A much easier and more logical way to organize a nav menu:
<ul id='menu'>
<li><a href='#'>Planets</a>
<ul>
<li><a href='#'>Mercury</a></li>
<li><a href='#'>Venus</a></li>
<li><a href='#'>Earth</a></li>
</ul>
</li>
<li><a href='#'>Stars</a>
<ul>
<li><a href='#'>Sun </a></li>
<li><a href='#'>Betelgeuse</a></li>
<li><a href='#'>Bellatrix</a></li>
</ul>
</li>
<li><a href='#'>Galaxies</a>
<ul>
<li><a href='#'>Milky Way </a></li>
<li><a href='#'>Andromeda</a></li>
<li><a href='#'>Antennae</a></li>
</ul>
</li>
</ul>
I just got this from google and here's the JSFiddle for it.

Answer 2

Here is a CodePen Example
Your HTML should have a mark similar to this as per your CSS
<div class="navbar">
<div class="navItem">Home</div>
<div class="navItem product-dropdown">
<span>Products</span>
<div class="dropdown-content">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</div>
Then as for styling something similar to this:
.dropdown-content{
display:none;
}
.product-dropdown:hover .dropdown-content {
display: block;
}
.navItem {
float: left;
padding: 10px;
}
li {
list-style-type: none;
}