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

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

顺便说一句，谷歌是你的朋友，这里有一个免费下拉菜单的来源，我猜你会找到一些适合你想要完成的：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 回答