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

【问题标题】：Is it possible to center a variable-width nested dropdown list to its variable width parent with only css?是否可以仅使用 css 将可变宽度嵌套下拉列表居中到其可变宽度父级？
【发布时间】：2011-06-25 21:23:30
【问题描述】：

我正在制作一个下拉列表，并且项目的长度非常不同，因此所有项目的标准宽度使它看起来很奇怪，但是我无法让下拉列表的行为看起来不奇怪反正。我希望下拉无序列表以他们的父母为中心，但没有预先确定设定的宽度。我已经看到了用 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;
}

【问题讨论】：

标签： drop-down-menu centering alignment css

【解决方案1】：

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

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

【讨论】：