title: horizontal menu that swipes with dropdown menu
body: <p>The client wants me to build a dropdown menu that swipes and shows dropdown menu when hover/clicked (cause it's for mobile version too). </p>
  
  <p>The problem causes overflow-x that is hiding dropdown and it has to show over the box.
  Is there any solution for this?</p>
  
  <pre><code>&lt;ul class="scroll-menu"&gt;
      &lt;li class="scroll-one"&gt;HOME&lt;/li&gt;
      &lt;li class="scroll-one"&gt;CATEGORY 1
      &lt;ul class="drop-w"&gt;
          &lt;li class="dropp"&gt;dropdown&lt;/li&gt;
          &lt;li class="dropp"&gt;dropdown&lt;/li&gt;
          &lt;li class="dropp"&gt;dropdown&lt;/li&gt;
          &lt;li class="dropp"&gt;dropdown&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="scroll-one"&gt;CATEGORY 2&lt;/li&gt;
      &lt;li class="scroll-one"&gt;CATEGORY 3&lt;/li&gt;
      &lt;li class="scroll-one"&gt;CATEGORY 4&lt;/li&gt;
      &lt;li class="scroll-one"&gt;CATEGORY 5&lt;/li&gt;
      &lt;li class="scroll-one"&gt;CATEGORY 6&lt;/li&gt;
  &lt;/ul&gt;
  
  
  .scroll-menu .scroll-one {
  display: inline-block;
  width:115px;
  padding: 1%;
  
  position: relative;
  
      list-style: none;
  }
  .scroll-one:hover .drop-w {
      display: inline-block;
  }
  .drop-w {
      display: inline-block;
  
      position: absolute;
      top: 30px;
      left: 5px;
      display: none;
  }
  </code></pre>
  
  <p>For demo I built dropdown menu only on Category1.
  <a href="https://jsfiddle.net/just_vr/ye483e4v/7/" rel="nofollow">https://jsfiddle.net/just_vr/ye483e4v/7/</a></p>
  
  <p>Please help. Thanks</p>