css - super 滑出式菜单

Question

大家好，我想从垂直菜单创建一种大型滑出式菜单，但这样做有一些困难。

我的导航 html 是沼泽标准的 3 层菜单，例如

<ul>
    <li><a href="#">Level 1 Item 1</a>
        <li><a href="#">Level 2 Item 1</a>
        <ul>
            <li><a href="#">Level 3 Item 1</a></li>
            <li><a href="#">Level 3 Item 1</a></li>
        </ul>
        </li>
        <li><a href="#">Level 2 Item 2</a>
        <ul>
            <li><a href="#">Level 3 Item 1</a></li>
            <li><a href="#">Level 3 Item 1</a></li>
        </ul>
        </li>
        <li><a href="#">Level 2 Item 3</a></li>
        <li><a href="#">Level 2 Item 4</a></li>
        <li><a href="#">Level 2 Item 5</a></li>
    </li>

我想要的如下图所示:

我在我想要的地方有导航，我有它，所以当我将鼠标悬停在第 1 级元素上时，第 2 级显示。我只是不确定如何让第 3 级显示在第 2 级元素下面

任何帮助将不胜感激。

谢谢

编辑 抱歉，伙计们忘记了我所拥有的 CSS，我不确定它是否适合我需要知道的内容:

.nav-container {float:left;}
#nav { width:220px; height:260px; font-size:13px;}

#nav li { text-align:left; list-style-type: none; position:relative; }

#nav li > ul {display:none;}

 #nav li:hover > ul{
     width:676px;
     height:260px;
     display: block;
     position:absolute;
     z-index:9999;
     left:220px;
     top:auto;
 }
 #nav ul li {
     padding:0 20px;
     display:inline;
 }

目前此 css 正确定位第一级，第二级显示在正确位置，第二级元素正确定位，我只是不确定如何将第三级元素定位在第二级元素下

编辑 2

我按照你们所说的构建了导航，只是没有输入正确!，我已经编辑了帖子以显示它，谢谢

Answer 1

这里提供的代码是一个很好的起点。

第一个问题，你的结构。

使用这样的结构，因为它可以更轻松地在树中更深入地定位和设置关卡样式。

fiddle :http://jsfiddle.net/SinisterSystems/hz45B/6/

• 一级
  • 2 级
    • 3 级
    • 3 级
  • 2 级
    • 3 级
    • 3 级
• 一级
  • 2 级
    • 3 级
    • 3 级
  • 2 级
    • 3 级
    • 3 级

<ul>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS:

li {
    padding:25px;
    border:1px solid #000;
    list-style:none;
    width:100px;
}
ul ul {
    display:none;
}
ul > li:hover > ul {
    display:block;
}

fiddle :http://jsfiddle.net/SinisterSystems/hz45B/6/

此时，对于第三个 ul 列表，只需应用此 CSS:

确保将您的 ul ul 设置在 position: relative;

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

肮脏的例子，但你明白了:

http://jsfiddle.net/SinisterSystems/hz45B/7/