0

私は現在、CSS ドロップダウン メニューに取り組んでおり、次の問題に遭遇しました。

  1. 連続する各サブ メニューは、その親メニューとオーバーラップする量が増えます。
  2. left属性 (各サブメニューには既に があります)を設定して項目 1 を修正しようとしてposition:absoluteも機能せず、メニューの位置が大きくずれます。
  3. サブメニューが表示されるたびに、rightパディングが自動的に増加し、メニューとメニュー項目の下の境界線の間にギャップが生じます。

私が使用する CSS display: table-*(星印はテーブル関連の表示値のいずれか) では、テキストの垂直方向の中央揃えを容易にし、選択したメニュー項目をリストの一番上に簡単に保持することができます (「参考文献」を参照display: table-header)。

上記の問題の解決策と原因の両方を知りたいです。

参考までに、完全に機能するJsFiddleを作成しました。

4

2 に答える 2

1

ここでフィドルを作成しましたhttp://jsfiddle.net/xUWdj/

行われた変更:

  1. すべてのテーブル表示を取り除きました。それを使用していた唯一の理由は、垂直方向の配置のためでした。代わりにline-heightで使用できます。<a>
  2. すべてのサブメニューは、 &<ul>によってその親に基づいて配置されるようになりましたleft: 100%;top: 0;

これで、メニューの残りの部分を好きなようにスタイル/配置できるはずです。

編集：

http://jsfiddle.net/HSh5n/2/を引き続き使用できるバージョンを次に示します。table-group-header

  1. かわったli a { display: block; line-height: 30px; }
  2. を移動するマージンを追加しましulた-42px 0 0 130px

テーブルに関する最大のことは、それらがインライン要素であるposition: relativeため、テーブルセルに割り当てることができないため、leftまたはtopプロパティを使用できなかったことだと思います。ブラウザでこれをテストしたことはありませんが、このルートに行くかどうかは常に再確認します.

于 2013-06-29T14:36:23.850 に答える
0

li a{...} に右の境界線を追加すると、オーバーラップの原因についてのアイデアを得ることができます。

li a {
    display: table-cell;
    border-bottom: solid 1px #cccccc;

    border-right: solid 1px #cccccc;

    text-decoration: none;
    color: rgba(89,87,87,0.9);
    height: 30px;
    padding: 5px;
    vertical-align: middle;
    cursor: pointer;
}
于 2013-06-29T15:07:48.610 に答える