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

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/

css菜单中的标题在悬停时改变宽度

2 个答案: