title: drop down from project list
body: <p>I am working on a multi-toggle drop down menu, and the functionality seems to be working properly, but there is a slight styling issue that is bothersome...I am having trouble removing a small white gap between the dropdown image that will toggle to list items. I want to remove the small white padding between dropdown menu item and the images below the toggled image...hopefully that makes sense...below is the html, css, and js.</p>
  
  <p>THanks in advance for any help!</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;
      &lt;title&gt;Dan Meier/ Designer&lt;/title&gt;
      &lt;meta name="description" content="Portfolio of Dan Meier"&gt;
      &lt;meta name="keywords" content="Freelance, Design, Illustration, Graphics, Website Design, UI, User Interface, Digital Design"&gt;
      &lt;meta name="author" content="Dan Meier"&gt;
  
      &lt;!-- Stylesheets --&gt;
      &lt;link href="css/styles.css" rel="stylesheet" type="text/css" /&gt;
  &lt;style&gt;
  ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
  
  }
  
  .dropdown a {
    text-decoration: none;
  
  }
  
  .dropdown [data-toggle="dropdown"] {
    position: relative;
    display: block;
  
  }
  
  .dropdown [data-toggle="dropdown"]:hover {
    background: #ffffff;
  }
  
  &lt;!-- All Projects --&gt;
          &lt;div id="projects_container_new"&gt;
          &lt;div id="all_projects"&gt;
              &lt;div class="col1"&gt;
  
              &lt;ul&gt;
                      &lt;li class="dropdown"&gt;
                      &lt;a href="#" data-toggle="dropdown"&gt;&lt;img class="thumb_image" src="images/UX-UI-Dev_cover.jpg"&gt;&lt;i class="icon-arrow"&gt;&lt;/i&gt;&lt;/a&gt;
  
                   &lt;ul class="dropdown-menu"&gt;
                      &lt;div class="thumb" data-url="project_thesis.html" data-num="0"&gt;
                      &lt;div class="thumb_title"&gt;&lt;span class="thumb_client"&gt;Published Thesis Work&lt;/span&gt;&lt;br /&gt;Algorithm &amp; Parametric Design&lt;/div&gt;
                      &lt;div class="thumb_hover"&gt;&lt;div class="view_project"&gt;See&lt;br /&gt;Work&lt;/div&gt;&lt;/div&gt;
                      &lt;img class="thumb_image" src="images/thesis_cover.jpg"&gt;
                  &lt;/div&gt;
                  &lt;div class="thumb" data-url="project_conceptualthinking.html" data-num="3"&gt;
                      &lt;div class="thumb_title"&gt;&lt;span class="thumb_client"&gt;Conceptual Thinking&lt;/span&gt;&lt;br /&gt;Visual Design&lt;/div&gt;
                      &lt;div class="thumb_hover"&gt;&lt;div class="view_project"&gt;See&lt;br /&gt;Work&lt;/div&gt;&lt;/div&gt;
                      &lt;img class="thumb_image" src="images/design_cover.jpg"&gt;
                  &lt;/div&gt;
                  &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;div class="thumb" data-url="project_thesis.html" data-num="0"&gt;
                      &lt;div class="thumb_title"&gt;&lt;span class="thumb_client"&gt;Published Thesis Work&lt;/span&gt;&lt;br /&gt;Algorithm &amp; Parametric Design&lt;/div&gt;
                      &lt;div class="thumb_hover"&gt;&lt;div class="view_project"&gt;See&lt;br /&gt;Work&lt;/div&gt;&lt;/div&gt;
                      &lt;img class="thumb_image" src="images/thesis_cover.jpg"&gt;
                  &lt;/div&gt;
               &lt;/ul&gt;
  
  &lt;!-- scripts --&gt;
  &lt;script&gt;// Dropdown Menu
  var dropdown = document.querySelectorAll('.dropdown');
  var dropdownArray = Array.prototype.slice.call(dropdown,0);
  dropdownArray.forEach(function(el){
      var button = el.querySelector('a[data-toggle="dropdown"]'),
              menu = el.querySelector('.dropdown-menu'),
              arrow = button.querySelector('i.icon-arrow');
  
      button.onclick = function(event) {
          if(!menu.hasClass('show')) {
              menu.classList.add('show');
              menu.classList.remove('hide');
              arrow.classList.add('open');
              arrow.classList.remove('close');
              event.preventDefault();
          }
          else {
              menu.classList.remove('show');
              menu.classList.add('hide');
              arrow.classList.remove('open');
              arrow.classList.add('close');
              event.preventDefault();
          }
      };
  })
  
  Element.prototype.hasClass = function(className) {
      return this.className &amp;&amp; new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
  };//@ sourceURL=pen.js
  &lt;/script&gt;
  &lt;script src="/assets/common/localstorage.js"&gt;&lt;/script&gt;&lt;script src="/assets/post/scroll/remember_scroll.js"&gt;&lt;/script&gt;&lt;script&gt;RememberScroll.init();&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Styles CSS:</p>
  
  <pre><code>html, body {
      margin: 0;
      padding: 0;
      background: #ffffff;
      font-family: "adelle-sans", Helvetica, Arial, sans-serif;
      font-weight: 400;
      font-style: normal;
      color: #ffffff;
      font-size: 13px;
      line-height: 22px;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
  }
  
  /* -------- Projects --------- */
  
  #projects_container_new {
      width: 100%;
      height: auto;
      position: absolute;
      top: 95%;
      margin: 0 auto 0 auto;
  }
  
  #all_projects {
      z-index: 999;
      max-width: 1200px;
      margin: -2% auto 0 auto;
      padding: 0 40px 120px 40px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow: hidden;
  }
  
  #all_projects .col1 {
      z-index: 999;
      float: left;
      width: 90%;
      height:auto;
      background-color: ;
      position: relative;
      display: block;
  }
  
  #all_projects .col2 {
      z-index: 999;
      float: left;
      width: 90%;
      background-color: #ffffff;
      position: relative;
      display: block;
  }
  
  #all_projects .col3 {
      z-index: 999;
      float: left;
          width: 90%;
      background-color: #ffffff;
      position: relative;
      display: block;
  }
  
  #all_projects .col1b {
      z-index: 999;
      float: left;
          width: 90%;
      background-color: #ffffff;
      position: relative;
      display: none;
  }
  
  #all_projects .col2b {
          display: none;
          z-index: 999;
      float: left;
       width: 50%;
      background-color: #ffffff;
      position: relative;
      display: none;
  }
  
  #all_projects .col1c {
      z-index: 999;
      float: left;
          width: 90%;
      background-color: #ffffff;
      position: relative;
      display: none;
  }
  
  #all_projects .thumb {
      position: relative;
      margin: 0;
      padding: 0;
      font-weight: 600;
      font-style: normal;
      color: #ffffff;
      text-align: left;
      overflow: hidden;
      cursor: pointer;
  }
  
  #all_projects .thumb .thumb_title {
      z-index: 999;
      position: absolute;
      margin: 0 0 6% 5%;
      bottom: 0;
      left: 0;
      padding: 0;
      font-size: 18px;
      line-height: 18px;
      cursor: pointer;
      color:#ffffff;
  }
  
  #all_projects .thumb .thumb_client {
      z-index: 999;
      font-size: 12px;
      cursor: pointer;
  }
  
  #all_projects .thumb .thumb_image {
      margin: 0;
      padding: 0;
      width: 100%;
      display: block;
  }
  
  #all_projects .thumb .thumb_hover {
      z-index: 998;
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      overflow: hidden;
      display: block;
      background-image: url("../images/hoverdark.png");
      opacity: 0;
      filter:alpha(opacity=0);
      -webkit-transition: all .15s ease-in-out;
      -moz-transition: all .15s ease-in-out;
      -o-transition: all .15s ease-in-out;
      -ms-transition: all .15s ease-in-out;
      transition: all .15s ease-in-out;
      cursor: pointer;
  }
  
  #all_projects .thumb .view_project {
      z-index: 999;
      position: absolute;
      width: 120px;
      height: 60px;
      top: 70%;
      left: 50%;
      margin: -30px 0 0 -60px;
      display: block;
      text-align: center;
      font-family: "adelle-sans", Helvetica, Arial, sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      line-height: 17px;
      text-transform: uppercase;
      color: #000000;
      background-image: url("../images/hover-icon.png");
      background-repeat: no-repeat;
      background-position: center bottom;
      opacity: 0;
      filter:alpha(opacity=0);
  }
  </code></pre>