user3350597 user3350597 - 2 months ago 4
CSS Question

HTML CSS .dropdown:hover trouble

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) :
enter image description here

What can I do to fix this?

Answer

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">
          <a href="#">Product 1</a>
          <a href="#">Product 2</a>
          <a href="#">Product 3</a>
        </div>
      </div>
      <button>Locations</button>
      <button>Contacts</button>
      <button>History</button>
      <div class="dropdown">
        <button class="dropbtn">Language</button>
        <div class="dropdown-content">
          <a href="#">Language 1</a>
          <a href="#">Language 2</a>
        </div>
      </div>
   </div>
</div>

There are a number of things here I would never do:

  1. <logotext> is not a valid HTML markup. You probably want a <span class="logotext"> or something along those lines.
  2. 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.
  3. 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.