Wie Menü-Links auf gleiche Länge setzen?

[Klaus]

Hallo,

ich bin dabei mir ein horizontales Menü zu basteln, habe aber ein Problem damit, die Links auf gleiche Länge zu setzen. Ich möchte keine feste Länge (im Sinne von width:150px;) sondern dass sich der kürzeste am längsten orientiert.
Optisch sicherlich noch stark verbesserungsfähig.

Hier ist der vorläufige Code "in action" zu sehen:
http://jsfiddle.net/ft8N4/

Ansonsten auch nochmal hier:

  
#navigation {  
    background: #444444;  
    border-radius: 4px;  
}  
#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }  
#navigation ul li{ float:left; position:relative; }  
#navigation ul li a{  
    display:block;  
    padding:8px 12px;  
    margin:1px;  
    font-size:18px;  
    white-space:nowrap;  
    border-radius:3px;  
	background:#3300ff;  
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007EBD), color-stop(1, #00557F) );  
	background:-moz-linear-gradient( center top, #007EBD 5%, #00557F 100% );  
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007EBD', endColorstr='#00557F');  
	color:#ffff33;  
	text-decoration:none;  
}  
#navigation ul li a:hover{ background:#222;}  
#navigation ul ul{  
    position:absolute;  
    top:-99999px;  
    left:0;  
    opacity: 0;  
    -webkit-transition: opacity .5s ease-in-out;  
    -moz-transition: opacity .5s ease-in-out;  
    -o-transition: opacity .5s ease-in-out;  
    z-index:497;  
    background:#3300ff;  
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007EBD), color-stop(1, #00557F) );  
	background:-moz-linear-gradient( center top, #007EBD 5%, #00557F 100% );  
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007EBD', endColorstr='#00557F');  
    padding: 2px;  
    border:1px solid #444;  
    border-top:none;  
    box-shadow:#111 0 3px 4px;  
    border-bottom-left-radius:6px;  
    border-bottom-right-radius:6px;  
}  
#navigation ul ul ul {  
    position:absolute;  
    top:-99999px;  
    left:100%;  
    opacity: 0;  
    -webkit-transition: opacity .5s ease-in-out;  
    -moz-transition: opacity .5s ease-in-out;  
    -o-transition: opacity .5s ease-in-out;  
    border-radius:6px;  
    border:1px solid #444;  
}  
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }  
#navigation ul ul li:hover>ul{  
	position:absolute;  
	top:0; left:100%; opacity: 1; z-index:497;  
	background:#3300ff;  
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #007EBD), color-stop(1, #00557F) );  
	background:-moz-linear-gradient( center top, #007EBD 5%, #00557F 100% );  
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007EBD', endColorstr='#00557F');  
}  

  
<div id="navigation">  
    <ul>  
        <li><a href="#">Home</a></li>  
        <li><a href="#">About</a></li>  
        <li><a href="#">Menu 1</a>  
            <ul>  
                <li><a href="#">sub menu one</a></li>  
                <li><a href="#">sub menu 2</a>  
                    <ul>  
                        <li><a href="#">sub sub menu 1</a></li>  
                        <li><a href="#">short</a></li>  
                    </ul>  
                </li>  
            </ul>  
        </li>  
        <li><a href="#">Contact</a></li>  
    </ul>  
</div>