0

親メニューliの幅を使用せずに、ドロップダウンメニューを中央揃えにしたいと思います。

CSS:

ul{list-style: none;}
li{display: block; float:left; height: 20px; background: #999999; margin: 10px;      position:relative;}
li span{height: 100px; width: 100px; background:#6699FF;position:absolute; left:-50%;     display:none;}
li:hover span{ display: block;}

HTML:

<ul>
  <li>Sample Content <span></span></li>
  <li>Sample Content Sample Content<span></span></li>
  <li>Sample Content<span></span></li>
  <li>Sample ContentSample ContentSample Content<span></span></li>
</ul>

サンプルはこちら: http://jsfiddle.net/y5nh8/

4

3 に答える 3

1

これについては、インターネット上に多くの例があります。たとえば、http://www.lateralcode.com/css-drop-down-menus/

于 2013-04-24T11:37:07.907 に答える
0

これはおそらく、スタックオーバーフローで多くの回答が寄せられている質問です。私のアドバイスは、css ドロップダウン メニューまたは同様のクエリの検索を使用することです。

ところで、Google はあなたの友達です。ここに無料のドロップダウン メニューのソースがあります。達成したいことに適したものが見つかると思います: http://cssmenumaker.com/css-drop-down-menu。

于 2013-04-24T11:36:22.190 に答える
0

スパンチェックアウト の CSS を変更しました

li span{height: 100px; width: 100px; background:#6699FF; display:none;margin:0 auto ;}

ここ

ハッピーコーディング:)

于 2013-04-24T11:37:40.600 に答える