html - CSS3 菜单显示错误 (CSS3/HTML5)

Question

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

链接:http://weveloped.com/

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

HTML 代码:

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

问题出在服务 li 中的 section 元素:它希望与 li 的父元素一样宽，所以它把一切都压低了。给那个 section position: absolute; 你应该是金色的。