Question

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?)

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)

My menu is like this currently:

Home / Test / News
Test_Sub1 / Test_Sub2 / Test_Sub3

But should be

Home / Test / News
       Test_Sub1 / Test_Sub2 / Test_Sub3

Here is my CSS 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;
}

Answer 1

Try This : http://jsfiddle.net/rathoreahsan/3NRu4/

Edit:

I have figured out your code:

you have defined:

#navigation ul.menu li:hover ul {display:inline;}

Chenge it to:

#navigation ul.menu li:hover ul {display:block;}

Also in this line,

#navigation ul.menu li ul li {display:inline; background-image:none; float:left; position:relative; left: 5em; }

Remove left: 5em to get the result like this: http://jsfiddle.net/rathoreahsan/GFURU/

Edited:

More over in this line:

#navigation ul.menu li ul {display:none; position:absolute; top:32px; float:left; border:none; background:red; left: 10em;}

Remove left: 10em to get ul a relative position

See the Demo: http://jsfiddle.net/rathoreahsan/rTsAE/

Hope it will fix it.