CSS3 Menu Shows Up Wrong (CSS3/HTML5)

Question

I've been working on a CSS3 menu, it's pretty much finished.. But, there is a little problem, the main li's are not really positioned good. If anyone could help me? I've got my site online and you could maybe inspect element? I think placing my code here would just take to much space etc..

Link: http://weveloped.com/

As you can see, the first li is placed horizontally, but the second one+ are placed vertically. How can I make sure all the li's are placed horizontally? It's probably something with the display's in the CSS code, but I can't seem to find the problem.

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>

Thank you very much.

You need to read up on the section element. Every section element you have should be a divor span — Michael Lawton
– Michael Lawton, Commented May 20, 2015 at 15:13
You should also add the code in your question. Linking to an external website means the question will be of no use to anybody viewing this once the problem is fixed. You can use jsfiddle or similar if you are unable to extract a small enough portion of code to put directly in the question. — Michael Lawton
– Michael Lawton, Commented May 20, 2015 at 15:16
@MichaelLawton I'll add the code to the post, by the way, section is just a replacement for div in HTML5. — peer
– peer, Commented May 20, 2015 at 15:20
Sorry but that's incorrect - read this article html5doctor.com/the-section-element — Michael Lawton
– Michael Lawton, Commented May 20, 2015 at 15:23
Your problem is that submenu (child of li) needs to be absolutely positioned — Michael Lawton
– Michael Lawton, Commented May 20, 2015 at 15:47

Benjamin · Accepted Answer · 2015-05-20 18:35:55Z

1

The problem is with the section element in the Services li: it wants to be as wide as the li's parent, so it pushes everything down. Give that section position: absolute; and you should be golden.

answered May 20, 2015 at 18:35

Benjamin

1,0701 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS3 Menu Shows Up Wrong (CSS3/HTML5)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related