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 に答える