ul alignment, removing the vertical space

How do I remove the verticle space below the UL and make all UL’s align below one another?
Thanks in advance.

[my jsfiddle][1]
[1]: https://jsfiddle.net/soulsurfer/bdeywmyw/1/

    <div class="dropdown-content">
  <ul>
    <h4>Baby Products</h4>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>
  <ul>
    <h4>Books & Magazines</h4>
    <li>
      <a href="#">Children & Babies</a>
    </li>
    <li>
      <a href="#">Commics</a>
    </li>
    <li>
      <a href="#">Fiction</a>
    </li>
    <li>
      <a href="#">Non-fiction</a>
    </li>
    <li>
      <a href="#">Textbooks</a>
    </li>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>
  <ul>
    <h6>CDs & DVDs</h6>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>
  <ul>
    <h4>Clothing & Accessories</h4>
    <li>
      <a href="#">Kids</a>
    </li>
    <li>
      <a href="#">Men Accessories</a>
    </li>
    <li>
      <a href="#">Men Clothing</a>
    </li>
    <li>
      <a href="#">Men Shoes</a>
    </li>
    <li>
      <a href="#">Sunglasses</a>
    </li>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>
  <ul>
    <h4>Collectibles & Gifts</h4>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>
  <ul>
    <h4>Computer & Networking</h4>
    <li>
      <a href="#">Accessories & Parts</a>
    </li>
    <li>
      <a href="#">Desktop</a>
    </li>
    <li>
      <a href="#">Laptop</a>
    </li>
    <li>
      <a href="#">Laptop Accessories</a>
    </li>
    <li>
      <a href="#">Networking</a>
    </li>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>

  <ul>
    <h4>Food & Beverages</h4>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>
  <ul>
    <h4>Health & Beauty</h4>
    <li>
      <a href="#">Diet & Nutirtion</a>
    </li>
    <li>
      <a href="#">Face-care</a>
    </li>
    <li>
      <a href="#">Fragrance</a>
    </li>
    <li>
      <a href="#">Hair care</a>
    </li>
    <li>
      <a href="#">Health care</a>
    </li>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>
  <ul>
    <h4>Home & Living</h4>
    <li>
      <a href="#">Bathroom</a>
    </li>
    <li>
      <a href="#">Bedding & Towels</a>
    </li>
    <li>
      <a href="#">Cleaning</a>
    </li>
    <li>
      <a href="#">Cooling & Air</a>
    </li>
    <li>
      <a href="#">Curtains & Blinds</a>
    </li>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>
  <ul>
    <h4>Industrial & Business</h4>
    <li>
      <a href="#" class="viewall">View all</a>
    </li>
  </ul>

</div>


    .main-menu-row
{
    border-bottom: 1px solid #E0E0E0;
    border-top: 1px solid #E0E0E0;
    min-height: 35px;
    margin-top: 5px;
}

.main-menu-row a
{
    color: #616161;
    vertical-align: middle;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    top: 5px;
    font-size: 0.875rem;
    padding: 7px 15px;
    font-family: 'Roboto', sans-serif;
}

.main-menu-row a:hover
{
    color: #2196F3;
}

.main-menu-row > .divider
{
    border-left: 1px solid #E0E0E0;
    height: 36px;
    position: relative;
    padding-bottom: 12px;
    padding-top: 2px;
}

.dropdown-content > ul
{
    width: 170px;
    height: auto;
    float: left;
    color: #6FB12F;
    padding-left: 10px;
    padding-right: 10px;
    display: inline;
    margin-bottom: 0;
    min-height: 50px;
}

.dropdown-content > ul > h6
{
    color: #6FB12F;
}


.dropdown-content > ul li
{
    width: 200px;
    list-style-type: none;
    display: inline;
    font-family: 'Roboto', sans-serif;
}

.dropdown-content > ul li:hover
{
    background-color: #fff;
}

.dropdown-content > ul li > .viewall
{
    color: #2196F3;
}

.dropdown-content > ul li:hover > .viewall
{
    color: #1565C0;
}

these are the codes from my jsfiddle


Source: css3

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.