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

css, html, javascript, jquery

Solution

Sure. 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;
}

Problem

I have a nav menu of links and sub menu. I want the submenu min width to be that of the link. Is this possible in CSS? I'm using 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 each `ul.submenu` to have the min-width of the previous sibling anchor. Obviously this would be a potentially different value for each submenu. Is this possible in CSS? Or is jquery, javascript a better solution here?

Original source