0

我正在实现一个非常简单的 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 的哪个部分抑制了它。有什么建议么？

4

2 回答 2

2

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

于 2013-05-28T11:23:22.253 回答
1

设置宽度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/

于 2013-05-28T11:26:20.733 回答