Error with CSS, bar appears where it should not

Navigation
5

I'm working on a college project where I need to make a website for a pizzeria. I'm making an embryo of the site, but when I add the navigation menu, a bar appears on top of the corresponding div that should not exist:

However,whenIremovetheentiremenu,thebardisappears:

Why does this happen? This is my CSS: 

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #DDDDDD;
    font-family: 'Roboto Condensed', sans-serif;
}
#header {
    background-color: #33b5e5;
    height: 59px;
}
#content {
    height: 600px;
    width: 100%;
}
#footer {
    height: 120px;
    background-color: #33b5e5;
}
.menu ul {
    list-style: none;
    padding: 0px 5px;
}
.menu ul li {
    display: inline;
}
.menu ul li a {
    display: inline-block;
    font-size: 14pt;
    font-weight: 300;
    padding: 17px 5px;
    color: white;
    text-decoration: none;
}
.menu ul li a:hover {
    background-color: #0099cc;
    color: #ddd;
}

And the HTML where div is at the top and the menu: 

<div id="header">
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Pizzas Tradicionais</a></li>
      <li><a href="#">Pizzas Especiais</a></li>
      <li><a href="#">Pizzas Premium</a></li>
      <li><a href="#">Pizzas Integrais</a></li>
      <li><a href="#">Pizzas Doces</a></li>
      <li><a href="#">Bebidas</a></li>
    </ul>
  </nav>
</div>

I can not find any apparent errors in this code. What can it be?

    
asked by anonymous 08.05.2014 / 22:45

2 answers

6

Your ul is with margin , see: 

.menu ul {
    list-style: none;
    padding: 0 5px;
    margin:0;
}

Example

    
08.05.2014 / 22:51
4

This is a very common problem in CSS, where margin of the child element ends up pushing the parent element down together.

To solve the problem, a simple overflow:hidden or auto in the element with margin ja is enough: 

.menu ul {
    overflow:hidden; /* ou auto */
    /* resto do código... */
}

To see an example: FIDDLE

    
08.05.2014 / 23:36
When is it worth to pay for SQLServer or Oracle? How to fill a value object automatically in php?