你可以设置相对于另一个元素的 css min-width 吗？

Question

我有一个包含链接和子菜单的导航菜单。我希望子菜单的最小宽度是链接的宽度。这在 CSS 中可能吗？如果有帮助的话我正在使用 LESS。

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

我希望每个锚点都ul.submenu具有前一个同级锚点的最小宽度。显然，对于每个子菜单来说，这可能是不同的值。这在 CSS 中可能吗？或者 jquery、javascript 是更好的解决方案吗？

Answer 1

当然。这是一个例子： 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;
}