title: How do I position the second level menu relative to the parent / first level menu?
body: <p>I am currently using position:absolute; for the second level menu, because when I use position: relative; the first level menu is broken (after the hovered item is a linebreak?)</p>
  
  <p>But I want to achieve that the second level menu that is showed, is positioned relative to the hovered item in the first level menu (directly under it and also horizontal)</p>
  
  <p>My menu is like this currently:</p>
  
  <pre><code>Home / Test / News
  Test_Sub1 / Test_Sub2 / Test_Sub3
  </code></pre>
  
  <p>But should be</p>
  
  <pre><code>Home / Test / News
         Test_Sub1 / Test_Sub2 / Test_Sub3
  </code></pre>
  
  <p>Here is my CSS Code</p>
  
  <pre><code>#navigation ul.menu {
  list-style-type:none;
  list-style:none;
  /*overflow:hidden;*/
  width:980px;
  }
  
  #navigation li {
  list-style:none;
  list-style-type:none;
  padding:0;
  float:left;
  display:inline;
  height:32px;
  }
  
  #navigation ul.menu {
  width:100%;
  height:32px;
  border-bottom: 1px solid #cecbcd;
  }
  
  /* style list as navigation using float:left */
  
  
  /* set distance from left corner to the first li item */
  #navigation ul.menu li:first-child {
  margin-left:150px;
  }
  
  #navigation ul.menu li ul li:first-child {
  margin-left:0px;
  }
  #navigation ul.menu li ul {display:none; position:absolute; top:32px; left: 10em; float:left; border:none;}
  #navigation ul.menu li:hover ul {display:inline;}
  #navigation ul.menu li:hover ul li {height:45; padding-top:8px; float:left; position: relative;}
  #navigation ul.menu li:hover ul li a {float:left;}
  #navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }
  #navigation ul.menu li a {
  /*background-color:#ffffff; */
  font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
  text-decoration:none;
  color: #666666;
  height: 32px;
  background-image:none;
  display:block;
  padding-left:5px;
  padding-right:5px;
  float: left;
  }
  
  #navigation ul.menu li ul li a {
  /*background-color:#ffffff; */
  font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
  text-decoration:none;
  color: #666666;
  height: 32px;
  background-image:none;
  display:block;
  padding-left:5px;
  padding-right:5px;
  float: left;
  }
  
  #navigation ul.menu li ul li a:hover, #navigation ul.menu li ul li.active-trail a.active-trail {
  /*background-color:#ffffff; */
  font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
  text-decoration:underline;
  color: #666666;
  height: 32px;
  background-image:none;
  display:block;
  padding-left:5px;
  padding-right:5px;
  float: left;
  }
  
  #navigation ul.menu li a:hover {
  font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
  text-decoration:none;
  color: #ffffff;
  height: 32px;
  background-image:url('../images/navi_active.png');
  background-position:center;
  background-repeat:no-repeat;
  
  }
  
  #navigation ul.menu li a.active, #navigation ul.menu li.active-trail a.active-trail {
  font: 12pt/24pt 'SansumiRegular', Arial, sans-serif;
  text-decoration:none;
  color: #ffffff;
  height: 32px;
  background-image:url('../images/navi_active.png');
  background-position:center;
  background-repeat:no-repeat;
  
  }
  
  div.region-header ul.menu {
  display:none;
  }
  </code></pre>