1

这是我试图在我的网站中加入的侧边栏的小提琴示例。 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带有图像的项目之后，并且可以放置在如下图所示的形式中。

在此处输入图像描述

如何做到这一点？

4

1 回答 1

0

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

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

于 2012-08-12T11:22:24.963 回答