Html ul中li元素的独立定位

这里是一个提琴的例子，一个边栏，我正试图纳入我的网站。

如果将鼠标悬停在第三项上，您会注意到鼠标悬停时会出现一个子菜单
子菜单的内容如下所示：

<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>

子菜单项1
子菜单项2
子菜单项1

其中，第一个

li

项是图像，其余三个是文本项

我想独立放置带有文本的

li

项目，即这些项目不应位于带有图像的第一个

li

项目之后，并且可以按下图所示的形式放置

---

如何才能做到这一点呢？

好吧，你完全可以定位所有这些。但更好的方法可能是这样：

#侧边菜单{边距：0；填充：0 50px；列表样式：无；}
#侧边菜单>li{margin:020px；}
#侧菜单>li:第一个子项{float:左；边距：0-50px；}

ul

ul

左侧的填充将列表项推到上方，负边距和浮动将再次将箭头向后拉

话虽如此，还有一种更好的方法：背景图像。我会这样做：

#侧边菜单{背景：url（/images/RightArrow.gif）无重复左；边距：0；填充：0 50px；列表样式：无；}
#侧边菜单>li{margin:020px；}

并删除第一个

li