如何让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;