Можно ли центрировать вложенный выпадающий список переменной ширины в родительском элементе переменной ширины только css? - PullRequest
Новая
       27

Можно ли центрировать вложенный выпадающий список переменной ширины в родительском элементе переменной ширины только css?

0 голосов
/ 12 февраля 2011

Я делаю выпадающий список, и элементы имеют довольно различную длину, поэтому стандартная ширина для всех элементов делает это странным, однако я не могу заставить выпадающие меню вести себя так, как это не выглядит странно тем не мение. Мне бы хотелось, чтобы выпадающие неупорядоченные списки были сосредоточены на их родителях, но без предопределенной ширины набора. Я видел способы сделать это с помощью js, но интересно, есть ли способ добиться этого только с помощью CSS?

ч http://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;
}

1 Ответ

0 голосов
/ 12 февраля 2011

Я бы попытался добиться этого, чтобы основная ссылка и ее дочернее всплывающее окно находились внутри одной и той же оболочки, с автоматическим полем влево и вправо.Таким образом, они оба будут центрированы с одной и той же центральной точкой.Очевидно, что структура ul li не будет работать так хорошо, или если это так, я слишком устала, чтобы думать правильно:)

Вот пример: http://jsfiddle.net/QacGj/4/

...