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 に答える