Can you set css min-width relative to another element?

Question

I have a navigation menu of links and a submenu. I want the minimum width of the submenu to be that of the link. Is this possible in CSS? I use LESS if that helps at all.

<ul>
   <li>
    <a href="">Item FooBarBaz</a>
    <ul class="submenu">
        <li><a>sub1</a></li>
        <li><a>sub2</a></li>
        <li><a>sub3</a></li>
    </ul>
   </li>
   <li>
       <a href="">Item FooBarBazZipBamBop</a>
       <ul class="submenu">
        <li><a>sub1</a></li>
        <li><a>sub2</a></li>
        <li><a>sub3</a></li>
       </ul>
   </li>
</ul>

I want everyone to ul.submenuhave the minimum width of the previous brother. Obviously, this will be a potentially different value for each submenu. Is this possible in CSS? Or jquery, javascript is the best solution here?

Answer 1

Of course. Here is an example: http://jsfiddle.net/SeKT9/

ul
{
    margin:0;
    padding:0;
    list-style:none;
}



body > ul > li 
{
    float: left;
    position: relative;
}

ul > li  a
{
    display: block;
    margin: 5px;
}

ul > li:hover > ul
{
    display: block;
}

ul > li > ul
{
    position: absolute;
    min-width: 100%;
    background-color: green;
    display: none;
} 

ul > li > ul > li
{
    display: block;
}

Answer 2

, div ? .

<ul>
   <li>
    <div style='display:inline-block;'>
        <a href="">Item FooBarBaz</a>
        <ul class="submenu">
            <li><a>sub1</a></li>
            <li><a>sub2</a></li>
            <li><a>sub3</a></li>
        </ul>
    </div>
   </li>
   <li>
    <div style='display:inline-block;'>
       <a href="">Item FooBarBazZipBamBop</a>
       <ul class="submenu">
        <li><a>sub1</a></li>
        <li><a>sub2</a></li>
        <li><a>sub3</a></li>
       </ul>
    </div>
   </li>
</ul>