An example of two inline, absolutely positioned dropdown menus that assume the width of their first element but expand in-place on hover to take the width of the largest element : http://jsfiddle.net/timmyomahony/tGn6m/

index.html

<div class="before">
    An example of two inline, absolutely positioned dropdown menus that assume the width of their first element but expand in-place on hover to take the width of the largest element. 
</div>
<div class="wrapper">
    <div>Two lists: </div>
    <div class="dropdown first">
        <ul>
            <li>Short 1st element</li>
            <li>A bit longer 2nd element</li>
        </ul>
    </div>
    <div>and</div>
    <div class="dropdown second" style="z-index:1">
        <ul>
            <li>A longer 1st element</li>
            <li>Short 2nd</li>
        </ul>
    </div>
</div>
<div class="after">
    Removing the `white-space:nowrap` on the  will prevent the dropdowns from expanding on hover, but any li in the list that is longer then the first will be wrapped. 
</div>

style.css

.wrapper div{
    display: inline-block;
    vertical-align: top;
    margin: 0 0.25em 0 0; 
    padding: 0.25em 0;
}
    .wrapper div.dropdown{
        position:relative;
        padding: 0;
    }
    .wrapper div.dropdown.first{
        z-index: 10;
    }
    .wrapper div.dropdown ul{   
        background-color: white;
        border: 1px solid #ddd;
        white-space: nowrap;
    }
        .wrapper div.dropdown ul:hover{
            position: absolute;
        }
        .wrapper div.dropdown ul li{
            display: none;
            cursor: pointer; 
            padding: 0.25em 0.5em;
            border-top: 1px dashed #ddd;
        }
            .wrapper div.dropdown ul li:first-child:hover{
                background-color: white;
            }
            .wrapper div.dropdown ul li:hover{
                background-color: #f8f8f8;
            }
        .wrapper div.dropdown ul:hover li,
        .wrapper div.dropdown ul li:first-child{
            display: block;
        }
        .wrapper div.dropdown ul li:first-child{
            border-top: none;
        }
                
.before, .after, .wrapper{
    margin: 0.25em;
    padding: 0.5em 0.75em;
    border: 1px dashed #eee;  
}