你能設置相對於另一個元素的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>