將下拉菜單居中放置，不帶寬度

Question

我想在不使用寬​​度的情況下使下拉菜單居中對齊。

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/

Answer 2

這很可能是在stackoverflow中得到很多回答的問題。 我的建議是使用搜索CSS下拉菜單或類似的查詢。

順便說一句，Google是您的朋友，這是免費下拉菜單的來源，我想您會發現一些適合您想要完成的事情： http : //cssmenumaker.com/css-drop-down-menu 。

Answer 3

我修改了跨度 css簽出

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

這里

快樂的編碼:)