CSS3菜单显示错误（CSS3 / HTML5）

Question

我一直在研究一个CSS3菜单，它已经完成了..但是，有一个小问题，主li并没有真正定位好。如果有人能帮助我？我有我的网站在线，你可以检查元素？我认为在这里放置我的代码会占用很多空间等。

链接：http://weveloped.com/

如您所见，第一个li水平放置，但第二个+垂直放置。如何确保所有li水平放置？它可能与CSS代码中的显示有关，但我似乎无法找到问题。

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>

非常感谢。

Answer 1

问题在于服务section中的li元素：它希望与li的父级一样宽，因此它会将所有内容都推倒。给section position: absolute;，你应该是金。