Названия в css меню меняют ширину во время зависания

Question

Я реализую очень простое меню css. Однако, если я выберу название меню в строке меню (и таким образом откройте связанное с ним меню), ширина заголовка будет расширяться до ширины меню, что нежелательно (то есть ширина заголовка не должна изменяться) , Проверьте JSFiddle, или взглянуть на разметку:

<div id="menu"> 
    <ul> 
    <li><a href="javascript: showLogin()">you</a> 
     <ul> 
     <li><a href="javascript: showLogin()">register...</a></li> 
     <li><a href="javascript: showLogin()">login...</a></li> 
     <li><a href="javascript: showLogin()">forgot password...</a></li> 
     </ul> 
    </li> 
    <li>.</li> 
    <li><a href="javascript: selectMenu()">qan</a></li> 
    <li>.</li> 
    <li style="width: 20px"><a class="site">be</a> 
     <ul> 
     <li><a href="javascript: false">be</a></li> 
     <li><a href="javascript: false">do</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

и определения CSS:

#menu { 
    font-family: Arial, Helvetica, sans-serif; 
    padding: 0px 5px; 
    font-size: 12px; 
    line-height: 18px; 
    color: darkgrey; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 20px; 
    background-color: black; 
    z-index: 3; 
    /*opacity: 0;*/ 
    white-space: nowrap; 
} 
#menu ul { 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
    list-style-image: none; 
} 
#menu>ul>li { 
    font-weight: bold; 
    display: inline-block; 
    float: left; 
    padding: 2px 1px 0px 1px; 
    width: auto; 
    /*width: 10px;*/ 
} 
#menu a { color: inherit; text-decoration: none;} 
#menu>ul>li>a:hover { background-color: grey;} 
#menu>ul ul { 
    display: none; 
    background-color: lightgrey; 
    padding: 2px 5px; 
    line-height: 14px; 
    min-width: 100px; 
} 
#menu>ul ul>li { 
    color: black; 
    padding: 2px 8px 2px 5px; 
    margin: 0px -3px; 
} 
#menu>ul ul>li:hover { color: lightgrey; background-color: grey;} 
#menu>ul>li:hover ul { display: block;} 

Поскольку меню генерируются динамически и содержание означало для изменения на лету и шрифта используется пропорционально, я не могу просто установить ширину заголовка на постоянное значение, которое подавляет изменение размера. Ширина заголовка должна определяться только шириной текста.
Он работал, когда я реализовал yuimenus, но это делало всевозможные вещи для моего CSS, последствия которого я нашел трудно контролировать, так что теперь я приготовил меню самостоятельно и вполне доволен им, сэкономьте для изменения ширины, и я не понял, какая часть yui подавила это. Какие-либо предложения?

Answer 1

Я не согласен с максимальной шириной .. это будет сделать связь по ширине контента независимого использования position:absolute; для подменит: jsFiddle

Answer 2

ширина Набора в li

Ваш обновленный пример: - http://jsfiddle.net/8U5An/8/

Css: -

#menu ul li { 
     width: 25px; 
    } 

Смотреть так мне полезный пример, а также, как они обращаются с такой же случай с помощью width только: -

http://www.diy.com/diy/jsp/index.jsp?noCookies=false

http://www.puregrips.com/