css - 悬停时，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

我不同意 max-width.. 这将使链接的宽度与内容无关使用 position:absolute; 作为子菜单:jsFiddle