html - 在 ul 中获取 li 元素的独立定位

Question

这是我试图合并到我的网站中的侧边栏的 fiddle 示例。 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 左侧的 padding 将列表项推过去，负边距与 float 结合将箭头再次拉回。

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

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