html - 如何让子菜单项的宽度自动调整大小

Question

当我将子菜单的宽度设置为width:auto时，名称很长的项目会被挤在一起。目前我将宽度设置为 175%，这是不可取的，因为某些菜单可能会变得很长。如何使宽度：自动适用于长菜单项。

链接到演示站点： http: //previewyournewwebsite.info/otsl/

.nav.main_nav .sub-menu {
    background-color: #2D556F;
    display: none;
    height: auto;
    /* left: -5px; */
    left: 0px;
    margin: 0 9px 0 0;
    position: absolute;
    top: 54px;
    width: 175%;
}

.nav.main_nav .sub-menu li {
    margin: 30px 0px;
    display: block;
}


.nav.main_nav .sub-menu li a {
    background-image: url("./images/sub-nav-divider.png");
    background-position: 0 bottom;
    height: 50px;
    line-height: 50px;
    background-repeat: repeat-x;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 15px;
    margin-left: -31px;
    padding: 0 0 0 44px;
    width: 100%;
}

.nav.main_nav .sub-menu > li{
    height: 50px;
    line-height: 50px;
    padding-left: 44px;
}

.nav.main_nav .sub-menu > li:last-child a{
    background-image: none;
}

.nav.main_nav .sub-menu li {
    display: block;
    margin: 0;
}

网站链接：http: //previewyournewwebsite.info/otsl/

Answer 1

你在找这个吗？

http://jsfiddle.net/coma/MNFXB/11/

nav ul, nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

nav a {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1em;
    color: #fff;
    background-color: #2D556F;
    white-space: nowrap;
}

nav > ul {
    background-color: #2D556F;
}

nav > ul:after {
    display: block;
    content: "";
    clear: both;
}

nav > ul > li {
    float: left;
    position: relative;
}

nav > ul > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    display: none;
}

nav > ul > li:hover > ul {
    display: block;
}

nav li:hover > a {
    background-color: #92A132;
}

或者你想要这样的东西吗？

http://jsfiddle.net/coma/MNFXB/12/