CSS список вопросов

Question

Может кто-нибудь помочь с этой проблемой CSS.Мне нужно, чтобы NavDropDown стал шире, когда любой текст NavLevel2 становится длиннее 200 пикселей.В элементах списка не должно быть переноса текста, а NavLevel1 всегда должен иметь ширину 200 пикселей.

<div id="Nav">
    <ul>
        <li class="NavLevel1" style="width: 200px; border: 1px solid Black;"><a><span>Level 1.1</span></a>
            <ul id="NavDropDown" style="border: 1px solid Black;">
                <li class="NavLevel2"><a><span>Level 2.1.1 test to see if this will push the width out a little</span></a></li>
                <li class="NavLevel2"><a><span>Level 2.1.2</span></a></li>
                <li class="NavLevel2"><a><span>Level 2.1.3</span></a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

изменить стиль width на min-width.

Answer 2

Я написал на скорую руку, только что нашел свое решение.

<div id="Nav">
    <ul>
        <li class="NavLevel1" style="width: 200px; border: 1px solid Black;"><a><span>Level 1.1</span></a>
            <ul id="NavDropDown" style="border: 1px solid Black; position:absolute;">
                <li class="NavLevel2" style="white-space: nowrap;"><a><span>Level 2.1.1 test to see if this will push the width out a little</span></a></li>
                <li class="NavLevel2"><a><span>Level 2.1.2</span></a></li>
                <li class="NavLevel2"><a><span>Level 2.1.3</span></a></li>
            </ul>
        </li>
    </ul>
</div>