CSS菜单下拉IE7向左浮动

Question

我制作了一个漂亮的菜单，还为 IE 编写了一个新设计。在 IE7 中，图像旁边的文本不会出现在图像旁边。它转到下一行。有人知道我该如何修复它吗？

http://tinyurl.com/6yzd2jc

Answer 1

您可以将background-image应用于锚标记。

示例 jsfiddle

因此替换：

ul ul a div {float:left;display:block;width:7px;height:10px;background-color:transparent;padding:0;margin:0 5px 0 0;position:relative;top:3px;}
ul ul a:hover div {display:block;background-image:url(http://ctuchicago.squarespace.com/storage/jquery/dot.png);width:7px;height:10px;}

为：

ul ul a:hover {background:transparent url(http://ctuchicago.squarespace.com/storage/jquery/dot.png) no-repeat left center;}

同时增加 左内边距（从 padding:3px 16px 3px 4px; 到 padding:3px 16px 3px 14px;）

ul ul li a {
    font-weight:normal;
    color: #FFF;
    padding:3px 16px 3px 14px;
}

并删除空

嵌套在锚点中

Answer 2

为什么在 a 标签内使用 div ？

从 a 标签中删除 div 并在 a 标签中应用 CSS 样式 background-image

检查此 http://jsfiddle.net/MNwD3/40/