在ul中获得li元素的独立定位

Question

这是我试图在我的网站中加入的侧边栏的小提琴示例。 http://jsfiddle.net/PF35v/9/

如果将鼠标悬停在第三个项目上，则可以看到悬停时出现子菜单。
子菜单的内容如下：

<ul id="side-menu">
            <li><img src="http://www.downes.ca/images/RightArrow.gif" alt="sub menu image (assume this is some kind of arrow" style="width:48px; height:48px" />
            </li>
            <li>Sub-menu item 1</li>
            <li>Sub-menu item 2</li>
            <li>Sub-menu item 1</li>
        </ul>

其中第一个li项是图像，其他三个是文本项。

我想将li项目单独放置文本，即这些项目不应出现在带图像的第一个li项目之后，并且可以放置在如下图所示的表单中。

如何实现这一目标？

Answer 1

嗯，你绝对可以定位所有这些。但更好的方法可能是这样的：

#side-menu { margin: 0; padding: 0 0 0 50px; list-style: none; }
#side-menu>li { margin: 0 0 20px; }
#side-menu>li:first-child { float: left; margin: 0 0 0 -50px; }

ul左侧的填充将列表项推到上方，负余量与浮点数相结合将再次拉回箭头。

话虽如此，还有更好的方法：背景图片。我会做这样的事情：

#side-menu { background: url(/images/RightArrow.gif) no-repeat left; margin: 0; padding: 0 0 0 50px; list-style: none; }
#side-menu>li { margin: 0 0 20px; }

并删除第一个li。