Ширина блока по тексту

[vlasenkov]

Здравствуйте!

Прошу прощения, если пишу не туда, довольно срочная проблема.

Есть слой, в котором ссылка, при наведении на эту ссылку появляется дополнительный слой (что-то вроде выпадающего меню). Выпадающее меню имеет определенную ширину (в зависимости от длины текста и т.д.), мне очень надо сделать, чтобы ширина этого выпадающего слоя была равна ширине ссылки, при наведении на которую появляется это меню. Пробовал разные пути, сейчас остановился на этом.

Нахожусь в абсолютном тупике. Буду благодарен за помощь.

<style type="text/css">
    .cat-list_parts_link {
        float: left;
        width: 150px;
        padding: 0 5px 20px 10px;
    }
    .cat-list_parts_link a { font-size: 14px; }
    .cat-list_parts_link-subdiv {
        display: block;
        position: absolute;
        z-index: 100;
        background: yellow;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .cat-list_parts_link:hover a {
        background: yellow;
    }
    .cat-list_parts_link:hover .cat-list_parts_link-subdiv {
        display: block;
    }    
</style>
<div class="cat-list_parts_link">
    <div style="width: auto;">
        <a href="#">Пункт 1</a>
        <ul class="cat-list_parts_link-subdiv">
            <li><a href="#">Подпункт 1</a></li>
            <li><a href="#">Подпункт 2</a></li>
            <li><a href="#">Подпункт 3</a></li>
            <li><a href="#">Подпункт 4</a></li>
            <li><a href="#">Подпункт 5</a></li>
        </ul>
    </div>
</div>
<div class="cat-list_parts_link">
    <div style="width: auto;">
        <a href="#">Пункт 2, и еще текстик</a>
        <ul class="cat-list_parts_link-subdiv">
            <li><a href="#">Подпункт 1</a></li>
            <li><a href="#">Подпункт 2</a></li>
            <li><a href="#">Подпункт 3</a></li>
            <li><a href="#">Подпункт 4</a></li>
            <li><a href="#">Подпункт 5</a></li>
        </ul>
    </div>
</div>
<div class="cat-list_parts_link">
    <div style="width: auto;">
        <a href="#">Пункт 3, немного</a>
        <ul class="cat-list_parts_link-subdiv">
            <li><a href="#">Подпункт 1, тут побольше</a></li>
            <li><a href="#">Подпункт 2</a></li>
            <li><a href="#">Подпункт 3</a></li>
            <li><a href="#">Подпункт 4</a></li>
            <li><a href="#">Подпункт 5</a></li>
        </ul>
    </div>
</div>

На картинке показан пример, красные линии, это какая ширина должна быть.

[DownHouse]

Как-то так: http://jsfiddle.net/v86LF/

[vlasenkov]

Как-то так: http://jsfiddle.net/v86LF/

Спасибо, за ответ. Но получается немного не то.

У меня список со ссылкой фиксированной ширины (допустим 500), а всплывающий слой должен быть шириной с текст в этом списке.

Получается когда я задаю размер списка, то уже не так - http://jsfiddle.net/v86LF/2/

[DownHouse]

Непонятно, конечно, зачем вам это. Можно задать ширину у первого ul вместо li. Но это, наверно, опять не то.

Ширину выпадающего списка можно привязать только к ширине родительского элемента. <a> не является родителем для списка.

[vlasenkov]

...

Ширину выпадающего списка можно привязать только к ширине родительского элемента. <a> не является родителем для списка.

Вот я пробовал через него это делать, т.е. выпадающий список загонять по <a>, но все равно не получается. Все равно спасибо, что отозвались, буду дальше геммороиться.

[DownHouse]

http://jsfiddle.net/v86LF/6/

Такой вариант еще.

[vlasenkov]

http://jsfiddle.net/v86LF/6/

Такой вариант еще.

Неплохое решение спасибо большое, а я все в лоб пытался