Question

I’ve read a bit about CSS3 calculations, but I’m having trouble finding this in particular. I’m building a site with drop down menus, and I’d like the the drop downs to match the width of the parent item, which has a variable width. I could always just set up a special id or class for each drop down, but that’s a bit of a pain.

The HTML is structured like:

<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>

Is there any way using CSS3 to set it to width = parent width or something?

Answer 1

Wrap the parent items in a div and nest the ul’s within that div with width set to 100% (or less if you wish for padding) and position:relative.

so…

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

You may need to enhance that with position:relative for the sublist ul’s depending on your existing styles.
Dave