如何使子菜單落在父菜單下方，而不是飛出去？

Question

我做了飛出菜單的的jsfiddle：

http://jsfiddle.net/ZSMLg/1/

下面是代碼，這是我從下面的帖子有：

Simple CSS fly out list, not so simple?

<ul> 
    <li>home</li> 
    <li>products 
     <ul> 
      <li><a href="#">CPUs</a> 
       <ul> 
        <li><a href="#">AMD<a> 
         <ul> 
          <li><a href="#">AM2</a></li> 
          <li><a href="#">AM3</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Intel</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Motherboards</a></li> 
      <li><a href="#">PSUs</a></li> 
      <li>Hard drives 
       <ul> 
        <li><a href="#">HDD</a></li> 
        <li><a href="#">SSD</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>Tracking</li> 
</ul> 

的CSS是如下：

ul {list-style-type: none; width: 8em; border: 1px solid #000; padding: 0;} 
/* just to set the base-line for the ul, but note the width. It's important. */ 

ul li {position: relative; border-top: 1px solid #000; margin: 0; padding: 0; } 
/* the position: relative is used to allow its child elements to be absolutely positioned */ 

ul li:first-child {border-top: 0 none transparent; } 
/* to avoid a two-pixel border on the first li (1px li-border + 1px ul-border) */ 

ul li:hover {background-color: #f90; } 
/* just to aid visually */ 

ul ul {position: absolute; top: -1px; left: 8em; display: none; } 
/* sets up all ul elements beneath the parent ul, the -px is to counter the movement forced by the border, bear in mind that the li:first-child doesn't *have* a border, so adjust to taste */ 

ul > li:hover > ul {display: block; } 
/* makes the nested list appear if the parent-li is hovered */ 

CSS應該怎麼樣，如果我想讓子菜單來到父菜單下方，稍微向左推？

Answer 1

嘗試刪除position: absolute;，在CSS替換此代碼：

ul ul {position: absolute; top: -1px; left: 8em; display: none; } 

ul > li:hover > ul {display: block; } 

有了這一個：

ul ul { display: none; } 

ul > li:hover > ul { margin-left:20%; display: block; }