title: how to fix hover option working on the whole row
body: <p>I just started making a website for practicing and learning html and css, and i made like a about button on the top right so when you hover over it it displays information, but the hover function works all over the left row of the website.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;position&quot;&gt;
      &lt;div class=&quot;dropdown&quot;&gt;
          &lt;button class=&quot;dropbtn&quot;&gt;Dropdown&lt;/button&gt;
          &lt;div class=&quot;dropdown-content&quot;&gt;
              &lt;h4&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>/* Dropdown Button */
  .dropbtn {
    background-color: #fff;
    color: #000;
    font-size: 20px;
    border: none;
    margin-left: 1370px;   
  }
  
  /* The container &lt;div&gt; */
  .dropdown {
    position: absolute;
    display: inline-block;
  }
  
  /* Dropdown Content */
  .dropdown-content {
    display: none;
    position: relative;
    background-color: #2841d1;
    min-width: 160px;
    max-width: 333px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 1140px;
  }
  
  /* Text inside the dropdown */
  .dropdown-content h4 {
    color: black;
    padding:15px;
    text-decoration: none;
    display: block;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown: hover .dropdown-content {display: inline-block;}
  
  .position{
      position: relative;
  }
  .dropdown-content,h4{
      width: 40%;
      word-break: break-all;
  }
  </code></pre>
  <p>Sorry for the bad code i just started learning html and css</p>