0

列表：

    <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 的子级的任何ul，如果是这样，则显示：块并且下拉菜单可见。

现在因为当悬停一个项目时，其中的项目将简单地列在下面，这不是我想要实现的。我想将项目 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;
}

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

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

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

4

2 回答 2

0

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

我position:absolute用于子子菜单：

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

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

<ul class="Third_level">
于 2013-11-08T22:23:11.503 回答
0

为什么不直接使用链接到的页面的 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

于 2013-11-08T22:14:43.053 回答