是否可以仅使用 css 将可变宽度嵌套下拉列表居中到其可变宽度父级？

Question

我正在制作一个下拉列表，并且项目具有非常不同的长度，因此所有项目的标准宽度使其看起来很奇怪，但是我无法让下拉列表以看起来不奇怪的方式运行。我希望下拉无序列表以它们的父母为中心，但不预先确定设置的宽度。我已经看到了用 js 实现这一点的方法，但想知道是否有一种方法可以仅用 CSS 来实现它？

hhttp://jsfiddle.net/QacGj/2/

<div id="menu">
            <ul>
            <li><a href="#">item 2</a></li>
            <li><a href="#">parentcategory</a>
                <ul class="child">
                    <li><a href="#">1</a></li>
                </ul>
        </div>

#menu
{
 display: block;
 margin: 0 auto;
 padding: 0;
 text-align: center;
 width: 100%;
}

#menu li
{
 display: inline-block;
 position: relative;
}
#menu li a
{
 padding: 0 10px;
}
#menu li a:hover
{
 text-shadow: 0 0 15px #FFF, 0 0 15px #FFF;
}

#menu li ul
{
 border: thin #DDD solid;
 list-style-type: none;
 padding: 5px 0;
 position: absolute;
 margin: 0 auto;
 width 100%
 z-index: 99999;
}
#menu li ul li 
{
 width: 100%;
 display: block;
 padding: 5px;
 text-align: left;
}

#menu li:hover > ul.child
{
 display: block;
}
#menu li > ul.child
{
  display: none;
}

Answer 1

我会尝试实现这一点，以便主链接及其子弹出窗口位于同一个包装器内，并具有自动左右边距。这样它们就会以相同的中心点为中心。显然 ul li 结构不能很好地工作，或者如果可以的话，我太累了，无法正确思考:)

这是一个例子： http://jsfiddle.net/QacGj/4/