Выпадающие пункты меню не раздвигаются по длине текста

#menu{
    float:left;
    width:100%;
    list-style:none;
    font-weight:bold;   
}
#menu li{
    float:left; 
    padding-right:1px;
    position:relative;
    display:block;
}
#menu li a{
    display:block;
    width:139px; 
    font-weight:400; 
    color:#1f1f1f; 
    font-size:16px; 
    line-height:51px; 
    background:url(/site/images/menu_bg.jpg) top repeat-x; 
    text-align:center; 
    text-transform:uppercase; 
    text-decoration:none
}
#menu li a span{ display:block; background:url(/site/images/menu_left.jpg) top left no-repeat}
#menu li a span span{ background:url(/site/images/menu_right.jpg) top right no-repeat}
#menu li a:hover, #menu .active a{ color:#fff; background:url(/site/images/menu_bg_active-2.jpg) top repeat-x}
#menu li a:hover span , #menu .active a span { background:url(/site/images/menu_left_active-2.jpg) top left no-repeat}
#menu li a:hover span  span , #menu .active a span  span{ background:url(/site/images/menu_right_active-2.jpg) top right no-repeat}
 
/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
 
#menu ul{
    list-style:none; /* убираем маркер списка */
    padding:0; /* обнуляем внутренние отступы */
    width:200px; /
    list-style:none;
    position:absolute;
    left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
    opacity:0; /* Устанавливаем начальное состояние прозрачности */
    -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#menu ul li{
    padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
    background:url(dot.gif);
}
#menu li ul li a {
    line-height: 30px;
}
 
#menu ul a{
    /* margin-top:-17px; */
    /* height:30px; */
    display:inline-block;
    vertical-align: -15px !important; 
    color:white;
    white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
    border-radius:2px; /* радиус скругления уголков рамки */
    -moz-border-radius:4px; /* для Firefox */
    -webkit-border-radius:4px; /* для Chrome */
    text-transform:none; 
    font-size:13px; 
}
 
#menu li:hover span, #menu ul a{ 
    background:url(/site/images/menu_left_active-2.jpg) top left no-repeat;
}
 
#menu li:hover span span, #menu ul a{ 
    background:url(/site/images/menu_right_active-2.jpg) top right no-repeat;
}
 
#menu li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
    left:0; /* Приносим его обратно на экран, когда нужно */
    opacity:1; /* Делаем непрозрачным */
}
#menu li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
    background:#F18314;
    text-decoration:underline;
}
#menu li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
    background:#808080;
    display:block;
    text-decoration:none;
}
#menu li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
    background:rgb(42,42,42);  /* Будет полупрозрачным */
    text-decoration:underline;
}

#menu li ul li a{padding-left:10px; padding-right:10px;}

#menu li:hover ul a{display:inline-block; width:100%;}

#menu ul a{white-space: nowrap;}

ul, ol {list-style-type: none;padding:0;margin:0;}
body {margin:0;padding:0;background:rgb(200,200,200);}
 
.menu {
    display:block;
    width:100%;
    height:50px;
    background:pink;
    margin:10px; 
}
 
.menu li {
    display:inline-block;
    padding:16px;
    background:white;
}
 
/* Sub Menu */
 
.menu li:nth-child(3):hover ul {display:block;left:178px;}
.menu li:hover ul {display:block;}
.menu li ul {
    display:none;
    position:absolute;
    top:60px;
    left:10px;
}
 
.menu li ul li {
    display:block;
    background:white;
    margin-top:4px;
    padding:5px;
}