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;，你應該是金。