Navigationsleiste + horizontales Menü

[Matthias]

Das Ziel: Navigationsleiste (unterschiedliche Linkbreite!) mit horizontalem Menü. Beim Hovern soll das Menü genau unterhalb des jeweiligen Links der Navi-Leiste angezeigt werden. Es wird jedoch (bis jetzt) immer unterhalb des 1.Links der Navi-Leiste angezeigt. Anbei noch HTML & CSS, freue mich über Lösungen.

HTML-Code:

<div>  
  <ul id="menu">  
   <li><a href="#" title="Titel1">Titel1</a></li>  
   <li><a href="#" title="Titel2">Titel2</a></li>  
   <li><a href="#" title="Titel3">Titel3</a></li>  
     <li id="Titel4"><a href="#" title="Titel4">Titel4</a>  
      <ul>  
                                <li><a href="#" title="Titel4 eins">Titel 4 eins</a></li>  
                                <li><a href="#" title="Titel4 zwei">Titel 4 zwei</a></li>  
      </ul></li>  
   <li><a href="#" title="Titel5">Titel5</a></li>  
   <li><a href="#" title="Titel6">Titel6</a></li>  
     <li id="Titel7"><a href="#" title="Titel7">Titel7</a>  
      <ul>  
                                <li><a href="#" title="Titel7 eins">Titel7 eins</a></li>  
                                <li><a href="#" title="Titel7 zwei">Titel7 zwei</a></li>  
      </ul></li>  
   <li><a href="#" title="Titel8">Titel8</a></li>  
  </ul>  
</div>

CSS

#menu {  
  background: #930ED5;  
  padding: 5px 2%;  
  margin: 0;  
  text-align: left;  
  line-height: 1.7em;  
  color: #FDD35D;  
}  
#menu ul {  
  margin: 0;  
  padding: 0;  
  list-style-type: none;  
}  
#menu li {  
  display: inline;  
  border-right: 1px solid #FDD35D;  
  list-style-type: none;  
  padding: 0 7px 0 5px;  
  font-size: 1em;  
  font-weight: bold;  
  line-height: 1.7em;  
  text-align: center;  
}  
#menu li a {  
  color: white;  
  text-decoration: none;  
}  
#menu li ul {  
  display: none;  
}  
#menu li:hover ul {  
  position: absolute;  
  display: block;  
  line-height: 2.7em;  
  margin-top: -3px;  
}  
#menu li ul li {  
  padding: 0 0.3em 0.2em 0.3em;  
  background-color: #930ED5;  
}  
#menu li ul li a {  
  color: #FFFFFF;  
}  
#menu li ul li:hover {  
  background-color: #FDD35D;  
}