带有纯CSS的垂直弹出菜单

Question

请检查以下代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">      
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>hover-navigation</title>

        <meta name="description" content="">
        <meta name="author" content="yesvin">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .menuContainer{
                width:100px;
                height:100vh;
                background:#ccc;
                z-index:1;                  
            }
            .menuContainer ul {
                padding:20px 0 0 0;
                margin:0;   
            }
            .menuContainer ul li {
                padding:10px;
                margin:0;
                list-style: none;               
                border-bottom:solid 1px #000;
                font-family:'Arial';
                font-size:16px;
                background:#00ACD6;
                position: relative;
            }
            .menuContainer ul li:hover{             
                background:#00A65A;
                cursor:pointer;
            }
            .menuContainer ul li a{
                text-decoration:none;               
                color:#000;             
            }
            .menuContainer ul li:hover a{
                text-decoration:none;               
                color:#fff;
            }
            .menuContainer ul li a:after{
                content:' •'    
            }

            .menuContainer ul li ul {               
                position: absolute;             
                top:-20px;
                left:-100px;
                height:100vh;
                width:0px;
                z-index:-1;

                -webkit-transition: width 0.4s, left 0.4s;
                -o-transition: width 0.4s, left 0.4s;
                transition: width 0.4s, left 0.4s;
            }
            .menuContainer ul li:hover ul {             
                left:100px;
                width:100px;    
            }
        </style>

    </head>

    <body>
        <div class="menuContainer">
            <ul>
                <li><a href="#">Frontend</a>
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>Javascript</li>
                    </ul>                   
                </li>                                   
                <li><a href="#">Backend</a>
                    <ul>
                        <li>PHP</li>
                        <li>MYSQL</li>
                        <li>ASP</li>
                        <li>JSP</li>                        
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

这里的问题是“ z-index”。 因此，当我将鼠标悬停在“ li”上时，子菜单会打开，但是当我将鼠标悬停在下一个“ li”上时，它会隐藏

但是删除“容器”和“ ul ul”的“ z-index”或保持相同的“ z-index”效果很好。 但是子菜单会在主菜单上设置动画。

我需要子菜单应该在容器后面。 解决方法是什么...

查看小提琴以获取演示http://jsfiddle.net/a92c03zj/1/

提前致谢 ...

Answer 1

看一下这个：

.menuContainer ul li ul {
    position: absolute;
    overflow: hidden;
    top:-20px;
    left:100px;
    height:100vh;
    width:0px;
    z-index:0;
    -webkit-transition: width 0.4s;
    -o-transition: width 0.4s;
    transition: width 0.4s;
}
.menuContainer ul li:hover ul {
    width:100px;
    z-index:1;
}

只需更改您的这些代码行，它就可以按照您的要求工作。 为了您的解释：我们只是为宽度设置了动画，而不是对左侧位置进行动画处理（无论如何我们都无法看到）。 为了使文本在整个时间内都能很好地显示，我们使用“ overflow:hidden ”，以免文本被压住。 另外，由于我们现在仅对宽度进行动画处理，因此左侧位置最初设置为100px。 我所做的最后一个更改是更改悬停时的z索引，以使“旧”下拉列表不会在“新”下拉列表上方进行动画处理。