title: list item highlighted but not the entire row
body: <p>My current <a href="http://jsfiddle.net/d63y4bxc/36/" rel="nofollow noreferrer">fiddle</a> is working fine apart from one thing. When I hover over the button I see the list displayed. Then when I hover over a list item the background changes colour which is all fine. However when the list item changes colour there is almost a box to the left of the item which is not highlighted and can't seem to get rid of it?</p>
  
  <pre><code>.dropbtn {
      background-color: #9FACEC;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
  }
  
  .dropdown {
      position: relative;
      display: inline-block;
   }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
   }
  
  .dropdown-content li {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  
  .dropdown-content li:hover {background-color: #ddd;}
  .dropdown:hover .dropdown-content {display: block;}
  .dropdown:hover .dropbtn {background-color: #4C66E9;}
  </code></pre>