CSS3 Menu Shows Up Wrong (CSS3/HTML5) - html

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>Homepage
</li>
<li>About Us
</li>
<li>Services
<section class="row">
<section class="three columns">
<ul>
<li class="title">Website Design
</li>
<li>Website Structure Design
</li>
<li>Mobile Website Design
</li>
<li>Parallax/Responsive Design
</li>
<li>Bespoke Design
</li>
</ul>
</section>
<section class="three columns">
<ul>
<li class="title">CManagement Systems
</li>
<li>WordPress
</li>
<li>Drupal
</li>
<li>Joomla
</li>
<li>Bespoke CMS
</li>
</ul>
</section>
<section class="three columns">
<ul>
<li class="title">Website Development
</li>
<li>CManagement System
</li>
<li>WebApp Development
</li>
<li>eCommerce Development
</li>
<li>Bespoke Development
</li>
</ul>
</section>
<section class="three columns">
<ul>
<li class="title">Our Work
</li>
<li>Portfolio
</li>
<li>Reviews
</li>
<li>Give a Review
</li>
</ul>
</section>
</section>
</li>
<li>Contact
</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.