我做了一个飞出菜单的jsFiddle：
这是我从以下帖子中获得的代码：
<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 应该是什么样子？