我创建了一个具有两个级别的纯 CSS 下拉菜单。第一级工作正常。但是第二层，必须飞出到父li的左侧，出现在li上方的固定位置。请参考http://joomlaosw.oswebware.com/（菜单项“关于模板”）
正如您会观察到的，所有飞出子菜单的位置对于所有 li 都是固定的。我希望飞出子菜单与父 li 保持一致。PS：我还不熟悉 jQuery，这就是我选择纯 CSS 菜单的原因。
请给我您宝贵的建议。
这是我的第一个模板，因此也欢迎任何改进我的工作的建议（除了主要问题）。提前致谢。阿努
请注意，这只是代码的相关部分...您可以使用 firebug 进行检查，或者如果需要，我将发送完整代码...
html代码
<ul class="menu ">
<li class="item-101 current active"><a href="/">Home</a>
</li>
<li class="item-109 deeper parent"><a href="/">About Template</a>
<ul>
<li class="item-103 deeper parent"><a href="/index.php/2013-09-14-00-17-18/typography">Typography</a>
<ul>
<li class="item-125"><a href="/">Sub Menu I</a>
</li>
</ul>
</li>
<li class="item-112 deeper parent"><a href="/index.php/2013-09-14-00-17-18/module-positions">Module Positions</a>
<ul>
<li class="item-126"><a href="/">Sub Menu II</a>
</li>
</ul>
</li>
<li class="item-113 deeper parent"><a href="/index.php/2013-09-14-00-17-18/styles">Styles</a>
<ul>
<li class="item-121"><a href="/index.php/2013-09-14-00-17-18/styles/blue">Blue</a>
</li>
<li class="item-123"><a href="/index.php/2013-09-14-00-17-18/styles/green">Green</a>
</li>
<li class="item-124"><a href="/index.php/2013-09-14-00-17-18/styles/black">Black</a>
</li>
<li class="item-122"><a href="/index.php/2013-09-14-00-17-18/styles/red">Red</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="item-110"><a href="/">Buy Now</a>
</li>
<li class="item-111"><a href="/">Contact Us</a>
</li>
</ul>
CSS
.menu {
margin: 100px auto;
text-align: center;
}
.menu ul {
display: none !important;
}
.menu ul li:hover > ul {
display: block;
}
.menu li:hover > ul {
display: block !important;
top: 20px;
position: absolute;
width: 150px;
}
.menu ul {
background-color: #FFFFFF;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-top: -5px !important;
z-index:3;
}
.menu ul li {
float: left;
}
.menu ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
.menu ul ul {
padding: 0;
position: relative;
top: 0;
left:100%;
}
.menu ul ul li {
float: left;
position: relative;
}
.menu ul ul li a {
padding: 15px 40px;
color: #fff;
}
.deeper.parent ul li a {
border: medium none !important;
padding: 15px 0 0 !important;
margin-top: -5px;
}