0

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

1 回答 1

0

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

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

于 2011-02-11T23:55:21.310 回答