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>

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

2 个答案: