html - 居中没有宽度的下拉菜单

Question

我想居中对齐下拉菜单而不使用父菜单 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/

Answer 1

网上有很多这样的例子。例如，http://www.lateralcode.com/css-drop-down-menus/