如何讓CSS子菜單鏈接長於父鏈接

Question

我有水平方向的子菜單中選擇一個CSS垂直菜單鏈接

http://jsfiddle.net/xmgMq/1/

我試圖讓子菜單的寬度相同鏈接的文本該鏈接不改變父鏈接的寬度。

這裏是我的CSS：

.vertical-nav { 
    height:auto; 
    list-style:none; 
    width: 400px; /******* MODIFIED ********/ 
    margin: 20px 0 0 0; 
} 
.vertical-nav li { 
    height: 25px; 
    margin: 0; 
    padding: 5px 0;stac 
    background-color: #666; 
    border: none; 
    text-align: center; 
    display: inline-block; 
    float: left; 
    width: 200px; /******* MODIFIED ********/ 
} 
.vertical-nav li:hover { 
    background-color:#f36f25; 
    color:#FFFFFF; 
} 
.vertical-nav li a { 
    font-family:Calibri, Arial; 
    font-size:18px; 
    font-weight:bold; 
    color:#ffffff; 
    text-decoration:none; 
} 
.vertical-nav li.current { 
    background-color:#F36F25; 
} 
.vertical-nav li.current a { 
    color:#FFFFFF; 
} 
vertical-nav ul li ul { 
    display:none; 
    list-style-type:none; 
    width:125px; 
    padding:0px; 
    margin-top:3px; 
    margin-left:-5px; 
} 
vertical-nav ul li:hover ul { 
    display:block; 
} 
vertical-nav ul li:hover ul li { 
    background-color:#555555; 
    width:125px; 
    height:30px; 
    display:inline-block; 
} 
vertical-nav ul li ul li:hover { 
    background-color:#333333; 
} 
vertical-nav ul li ul li a { 
    color:#FFF; 
    text-decoration:underline; 
} 
vertical-nav ul li ul li a:hover { 
    text-decoration:none; 
} 
.vertical-nav li ul { 
    display: none; 
    margin-top: 6px; 
    padding: 0; 
} 
.vertical-nav li:hover ul { 
    display: block; 
} 

我所做的子菜單的寬度鏈接200像素，然後犯規顯示所有的文本，如果它的長度，或者我還能保持100％它只做100％父鏈接

Answer 1

要獲取所有李時珍採取最寬麗的寬度 - 使用css tables

.vertical-nav li:hover .sub-menu 
{ 
    display: table; 
} 
.sub-menu li 
{ 
    width: 100%; 
    min-width: 180px; 
    white-space: nowrap; 
    display:table-row; 
} 
.sub-menu li a 
{ 
    display:inline-block; 
    padding: 0 10px; 
} 

FIDDLE

Answer 2

這是你在尋找什麼

.vertical-nav li uL li{width:auto !important;min-width:51%;} 

Answer 3

化妝李

width: auto; 
min-width: 200px;