CSS: positioning navigation menu items

I'm currently developing a new website where the main header and the navigation menu are vertically positioned. Basically, in this case we follow the normal flow of the document by keeping the header above the navigation menu. Of course all the navigation items are positioned below the header and that's what bothers me. What I wanted was pretty simple: positioning all the items just below the main heading text but inside the header's area. So we have the following HTML structure:

<div id="branding">
 
 <h1>Branding</h1>
 
</div>

<div id="navigation">
 
 <ul>
  
  <li><a href="#">Home</a></li>
  <li><a href="#">Articles</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  
 </ul>
 
</div>

As you can see, the header's area lies above the navigation menu. I fixed this problem by using relative positioning on all the list items:

#branding {
  
  height: 10em;
  background: #333 url(branding.jpg) repeat-x 0 0;
  color: #fff;
  
 }
 
 #branding h1 {
  
  margin: 0 auto;
  padding: 20px 0;
     width: 50%;
  font-family: "Trebuchet MS", Trebuchet, sans-serif;
  font-size: 5em;
  font-weight: normal;
  text-transform: uppercase;
  
 }
 
 #navigation {
  
  background: #000;
  color: #fff;
  height: 2em;
  
 }
 
 #navigation ul {
  
  width: 50%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  height: 100%;
  
 }
 
 #navigation li {
  
  float: left;
  height: 100%;
  margin-right: 0.5em;
  position: relative;
  top: -2em;
  
 }
 
 #navigation a {
  
  height: 100%;
  display: block;
  line-height: 2;
  padding: 0 1em;
  background: #555;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  -moz-border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
  
 }
 
 #navigation a:hover {
  
  background: #777;
 }

I've used negative relative positioning by moving upwards all the list items. You can see the result below.