第2レベルのメニューを親/第1レベルのメニューに相対的に配置するにはどうすればよいですか？

Question

私は現在position：absoluteを使用しています。 2番目のレベルのメニューでは、私はposition：relativeを使うので、

しかし、私は、表示されている2番目のレベルのメニューが、最初のレベルのメニュー（そのすぐ下にある表示されたアイテムに関連して配置されていることを達成したいと思いますまた、水平方向）

私のメニューは、現在、このようなものです：

Home/Test/News 
Test_Sub1/Test_Sub2/Test_Sub3 

しかし

Home/Test/News 
     Test_Sub1/Test_Sub2/Test_Sub3 

する必要がありますここに私のCSSコードがある

#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

これを試してみてください。http://jsfiddle.net/rathoreahsan/3NRu4/

編集：私はあなたのコード考え出した

：

を定義した：

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

Chengeそれへ：

を

編集：この行でも

10、

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

このような結果を得るためにleft: 5emを削除

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

削除：この行の

より上left: 10emを取得するulアイブ位置

はデモを参照してください：http://jsfiddle.net/rathoreahsan/rTsAE/

は、それはそれを修正します願っています。