CSS3 Menu Shows Up Wrong (CSS3/HTML5)

Question

I've been working on a CSS3 menu, it's pretty much finished.. But, there is a little problem, the main li's are not really positioned good. If anyone could help me? I've got my site online and you could maybe inspect element? I think placing my code here would just take to much space etc..

Link: http://weveloped.com/

As you can see, the first li is placed horizontally, but the second one+ are placed vertically. How can I make sure all the li's are placed horizontally? It's probably something with the display's in the CSS code, but I can't seem to find the problem.

HTML CODE:

header {
  width: 100%;
  height: 85px;
  background-color: rgba(24, 24, 24, 1);
  position: fixed;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}
header ul,
header li {
  padding: 0;
  margin: 0;
}
header.sticky {
  height: 50px;
  /*background-color: rgba(24,24,24,0.6);*/
}
header nav {
  text-align: right;
}
header nav li {
  display: inline-block;
}
header nav li a {
  display: inline-block;
  height: 85px;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 85px;
  color: #FFF;
  text-decoration: none;
  font-weight: 600;
}
header nav li:hover > a {
  color: #A80000;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}
header nav li section.row {
  overflow: hidden;
  height: 0px;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
header nav li section.row ul li {
  display: block;
}
header nav li section.row ul li a {
  display: block;
  height: 25px;
  line-height: 25px;
  margin: 0px 17px 0px 17px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0;
  padding-right: 0;
  color: #555;
  font-weight: 400;
  border-bottom: 1px dashed #333941;
}
header nav li section.row ul li a:hover {
  color: #A80000;
}
header nav li section.row ul li:last-child a {
  border: none;
}
header nav li section.row ul li.title a {
  color: #222;
  font-weight: 600;
  padding-top: 12px;
  margin-left: 16px;
  border: none;
}
header nav li:hover > section.row {
  overflow: visible;
  max-width: 960px;
  height: 200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
  background-color: #F5F5F5;
  text-align: left;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

<header>
  <nav>
    <li><a href="#">Homepage</a>
    </li>
    <li><a href="#">About Us</a>
    </li>
    <li><a href="#">Services</a>
      <section class="row">
        <section class="three columns">
          <ul>
            <li class="title"><a href="#">Website Design</a>
            </li>

            <li><a href="#">Website Structure Design</a>
            </li>
            <li><a href="#">Mobile Website Design</a>
            </li>
            <li><a href="#">Parallax/Responsive Design</a>
            </li>
            <li><a href="#">Bespoke Design</a>
            </li>
          </ul>
        </section>
        <section class="three columns">
          <ul>
            <li class="title"><a href="#">CManagement Systems</a>
            </li>

            <li><a href="#">WordPress</a>
            </li>
            <li><a href="#">Drupal</a>
            </li>
            <li><a href="#">Joomla</a>
            </li>
            <li><a href="#">Bespoke CMS</a>
            </li>
          </ul>
        </section>
        <section class="three columns">
          <ul>
            <li class="title"><a href="#">Website Development</a>
            </li>

            <li><a href="#">CManagement System</a>
            </li>
            <li><a href="#">WebApp Development</a>
            </li>
            <li><a href="#">eCommerce Development</a>
            </li>
            <li><a href="#">Bespoke Development</a>
            </li>
          </ul>
        </section>
        <section class="three columns">
          <ul>
            <li class="title"><a href="#">Our Work</a>
            </li>

            <li><a href="#">Portfolio</a>
            </li>
            <li><a href="#">Reviews</a>
            </li>
            <li><a href="#">Give a Review</a>
            </li>
          </ul>
        </section>
      </section>
    </li>
    <li><a href="#">Contact</a>
    </li>
  </nav>
</header>

Thank you very much.

Answer 1

The problem is with the section element in the Services li: it wants to be as wide as the li's parent, so it pushes everything down. Give that section position: absolute; and you should be golden.