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/

Answer 2

这很可能是一个在stackoverflow中得到了很多回答的问题。我的建议是使用搜索 css下拉菜单或一些类似的查询。

顺便说一句，谷歌是你的朋友，这里是免费下拉菜单的来源，我猜你会发现一些适合你想要完成的事情：http://cssmenumaker.com/css-drop-down-menu。

Answer 3

我修改了 span 的css签出

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

HERE

快乐编码：）

使下拉菜单居中，没有宽度

3 个答案: