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

Question

我有链接和子菜单的导航菜单。 我希望子菜单min width是链接的宽度。 这在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;
}

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>