超级滑出菜单

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>

我想要的内容如下图所示：

我将导航器放在我需要它的位置，所以当我将鼠标悬停在第2级显示的第1级项目时。我只是不确定如何让第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

这是提供代码的良好起点。

第一个问题，你的结构。

使用这样的结构，因为它可以更容易地将您的关卡更深层地定位到树中。

小提琴：http://jsfiddle.net/SinisterSystems/hz45B/6/

    
• 1级         
              
  • 等级2                 
                        
    • 等级3
                        
    • 等级3
                    
                
              
  • 等级2                 
                        
    • 等级3
                        
    • 等级3
                    
                
          
      
    
• 1级         
              
  • 等级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;
}

小提琴：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/