Question

列表：

    <ul>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li>
                    <a href="#">Item 1-1</a>
                    <ul>
                        <li><a href="#">Item 1-1-1</a></li>
                        <li>
                           <a href="#">Item 1-1-2</a>
                           <ul>
                              <li><a href="#">Item 1-1-2-1</li>
                           </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Item 1-2</a></li>
                <li><a href="#">Item 1-2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a></li>
    </ul>

这是一些相关的CSS

#nav ul ul {
    display: none;
}

#nav ul li:hover > ul {
    display: block;
}

第一个将隐藏每个下拉项。第二个匹配任何一个孩子的父亲#nav ul li：hover，如果是，则显示：block，下拉列表可见。

现在因为当悬停一个项目时，其中的项目将简单地列在下面，这不是我想要实现的。我想将项目1-1-1和项目1-1-2移动到项目1-1的右侧，项目1-1-1需要在右侧，项目1-1-2将低于它（作为下拉列表）。我不确定如何选择那个元素。示例：http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html

这是我到目前为止所得到的：

http://jsfiddle.net/Gq8C2/

我尝试过第一个孩子，例如：

#nav ul li:hover > ul li:first-child {
    display: block;
}

我也试过使用绝对位置和相对位置，它几乎给了我想要的结果，但是我无法抓住第一个项目......

必须有更好的方法来做到这一点......

如何选择它？我如何做出与我上面描述的相似的行为？

Answer 1

为什么不直接使用您链接的页面的css / html而不是尝试重新发明它？

HTML：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

CSS

Answer 2

查看此小提琴 http://jsfiddle.net/Gq8C2/10/

我使用position:absolute作为子子菜单：

#nav ul li ul li ul {
  position:absolute;
  top:0;
  left:100%;
}

为了升级您的代码，您可以为菜单的每个级别分配一个类，如

<ul class="Third_level">

在列表中选择li

2 个答案: