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的父级一样宽，所以它将所有东西都推下来。给那sectionposition: absolute;，你应该是金。