Ширина = Ширина родителя CSS3

Question

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

HTML структурирован как:

<ul>
    <li>
        <a href="#">Parent Item</a>
        <ul class="sublist">
            <li><a href="#">Sub Item</a></li>
            <li><a href="#">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="#">Normal Item</a></li>
    <li><a href="#">Normal Item</a></li>
    <li>
        <a href="#">Parent Item</a>
        <ul class="sublist">
            <li><a href="#">Sub Item</a></li>
            <li><a href="#">Sub Item</a></li>
        </ul>
    </li>
    <li><a href="#">Normal Item</a></li>
</ul>

Есть ли способ использовать CSS3, чтобы установить его в ширину = родительскую ширину или что-то?

Answer 1

Оберните родительские элементы в div и вложите ul в этот div с шириной, равной 100% (или меньше, если вы хотите заполнить), и позицией: относительный.

так ...

<li>
    <div id='parent'><a href....></a>
        <ul class='sublist' style='width:100%;'>
            <li>...</li>
        </ul>
    </div>
</li>

Вам может потребоваться улучшить это с помощью позиции: относительной для ul подсписка в зависимости от ваших существующих стилей. Dave