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

Question

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

链接： http ： //weveloped.com/

如您所见，第一个li放置在水平位置，而第二个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

问题出在Services li的section元素上：它希望与li的父元素一样宽，因此将所有内容都压低了。 给出该section position: absolute; 而且你应该是黄金的。