title: Overlaying a drop down menu over a floated image
body: <p>I'm designing a website for a small business, and they said they wanted two things. Drop down menus, and a slideshow on the main page. This would be fine, if it wasn't for the fact I have to float the slideshow so it wont interfere with the rest of the page (Side menu type thing)</p>
  
  <p>The problem is that the images now overlay the dropdown menu, and the only solution I can see is either moving the images or removing them completely. It'd be great if I didn't have to do either, but compromises can be made.</p>
  
  <p>The dropdown code is this (credit to W3 for it):</p>
  
  <pre><code>`.dropbtn {
      background-color: #73797A;
      color: white;
      padding: 3px 7px 4px 1px;
      font-size: 35px;
      border: none;
      cursor: pointer;
      margin-top: 30px;
      border-right-style: solid;
  }
  
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f4f4f4;
      min-width: 100%;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      width: 100%;
  }
  
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  .dropdown:hover .dropbtn {
      background-color: #30DAFC;
  }`
  </code></pre>